https://mtnstandard.com
上のサイトの用にフルスクリーンのメインイメージの下に次の要素(reservationsの部分)を作るにはどうしたらいいのでしょうか?ただ単にマージンのマイナス調整ではなく、ブラウザのウィンドウサイズのリサイズに応じて常に一定サイズ保ったデザインの作り方をお願いします。
ご紹介のサイトはJavascriptを使ってウィンドウサイズからdivの高さをリアルタイムで計算させてるみたいです。
IE9以降対応になりますが、cssのcalcを使えばもっと簡単に実装できます。詳しくはリンク参照で。
余談ですが、要素の高さに%を使う場合、htmlとbodyにもheight:100%を指定しないと高さの計算がうまくできなくなります。同じくIE9以降限定ですが、高さの単位として「vh」を使うと最初からviewport基準で高さを計算してくれます。100vh=viewportの高さの100%です。
background-size: coverでフルスクリーンを実装した場合はcalcが使えないようなのですが、この場合どう実装すればいいのでしょうか？フルスクリーンを維持したまま直ぐ下の要素の一部を常に見える様にするのが目的です。
background-size:coverを指定した要素にheight:calc(100vh - 50px)を指定してみましたが、問題なく表示されました。最新のFirefox及びChromeで確認しました。
まさかと思いますけど、bodyに背景指定してないですよね？
html には height 100%; overflow: hidden。body には overflow-y: scroll; overflow-x; hidden; height: 100%を指定しています。div にクラスをあててcssでbackground urlで呼び出しています。div のクラスにはwidth:100%; background-position: center center; backgorund-size: cover; background-attachment: fixed; min-height: 800px; height: autoからheight:calc(100vh - 50px)に変更しましたが表示されません。その直ぐ下にあるsectionの一部をウィンドウサイズに合わせて常に表示するのが目的です。
みんなの回答 1 件
ご紹介のサイトはJavascriptを使ってウィンドウサイズからdivの高さをリアルタイムで計算させてるみたいです。
IE9以降対応になりますが、cssのcalcを使えばもっと簡単に実装できます。
詳しくはリンク参照で。
余談ですが、要素の高さに%を使う場合、htmlとbodyにもheight:100%を指定しないと高さの計算がうまくできなくなります。
同じくIE9以降限定ですが、高さの単位として「vh」を使うと最初からviewport基準で高さを計算してくれます。
100vh=viewportの高さの100%です。
CSSで計算式を可能にするcalc()ファンクション
https://w3g.jp/blog/css3_calc_function関連するトピックス