BinaryDevelop
  1. ホーム
  2. html

[解決済み] html要素が画面の残りの高さを100%埋めるにはどうしたらよいでしょうか。

2022-05-17 23:40:36

質問

header要素とcontent要素を持っています。 

#header
#content

ヘッダーの高さは固定で、コンテンツは画面上の残りの高さをすべて埋めるようにしたい。 overflow-y: scroll; .

これはJavascriptなしで可能ですか？

どのように解決するのですか？

このコツは、htmlとbody要素に100%の高さを指定することです。 ブラウザによっては、親要素（html, body）を見て高さを計算するものもあります。 

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します