Q&A
調べているうちになにがあったのですか？
またコード等がないので回答ができません
TopPageを開いたときに、画像を画面全体に表示したいです。
調べているうちに、heightを100vhと指定する方法がヒットして、それを用いようと思いました。
しかし、ヘッダーがFixedで50pxほどあり、ヘッダー以外の要素をmargin-top:50pxで下げて調整しています。そのため100vhにすると、50px分画像がはみ出してしまうのです。
こういう場合、どのようにすれば良いのでしょうか。
このサイトのようにしたいです。
お力をお貸しいただけるよう、お願いいたします。
＞追記
上記の参考サイトの場合だと、例えばiPhoneXの画面の場合、縦幅が812pxで、ヘッダーが50px、下の「Shop Now」の部分がPaddingを含めて56px。
そして、画像が「812px-50px-56px=706px」で、画像のheightが706pxに設定されており、ぴったりおさまっています。
しかし、単純に画像のheightを100vhとしてしまうと、812pxになり、56px分はみ出てしまいます。
かといって、height:100vh - 56px;のような記述も通用しませんでした。
こういう計算はどのようにして実現されているのでしょうか？
HTML
1<div class="header" style="height:50px; position:fixed"></div> 2 3<div class="main" style="margin-top:50px"> 4 5 <img src="example.img"> 6 7 <div style="height:50px" class="main_bottom"> 8 <p>aaaa</p> 9 </div> 10 11</div> 12
例えば、以上のようなサイトで、header,main_bottomとimgの三つ合わせてて画面いっぱいに表示させたい場合などです。参考サイトとして挙げた上記リンクがそのような形になっています。
この場合、画像のheightを100vhにしてもダメですし、単純にheightを指定するにも画面の大きさは千差万別です。
説明が下手で申し訳ないのですが、どなたかヒントだけでもいただけると助かります、、、
ご自身のコードと現在の状態がわかる画面キャプチャをご提示ください。
「のように」はあくまで「のように」であってそのものではないので、
「こういう形」など図示していただいたほうがアドバイスも得やすくなると思います。
読んでいただきありがとうございます。
申し訳ございません。なぜか途中で投稿されてしまったため修正をいたしました。
言葉足らずですが、よろしくお願いいたします。
おそらく私は編集後を読んでいます。
現在の内容を読んでも指摘は変わりません。
多分それmouse_484さんへの返信ですね。投稿直後を見たらなんか概要の記述すら途中だったので。
回答1件
0
ベストアンサー
【calc() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/calc
投稿2020/04/25 06:52
総合スコア69606
あなたの回答
tips
プレビュー
