cssのみを使用して、html要素で残りの画面の高さを100％埋めるにはどうすればよいですか？

118

ヘッダー要素とコンテンツ要素があります：

#header
#content

ヘッダーの高さを固定し、コンテンツで、画面で使用可能な残りの高さすべてをで埋めるようにしますoverflow-y: scroll;。

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

html  css 
— ハリー
ソース

回答:

83

これの秘訣は、html要素とbody要素に100％の高さを指定することです。一部のブラウザは、親要素（html、本文）を参照して高さを計算します。

<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;
}
— BentOnCoding
ソース
1
私はすべての解決策を試しましたが、これだけが私の問題を解決しました。
— Alex
1
@Alexこれがターゲットとするすべてのブラウザーで機能する場合は、必ず先に進んで実装してください。みんなの要件は異なります。
— BentOnCoding 2018年
321

すべての答えを忘れて、CSSのこの行は2秒で私のために働きました：

height:100vh;

1vh =ブラウザ画面の高さの1％

ソース

レスポンシブレイアウトスケーリングの場合、次を使用することをお勧めします。

min-height: 100vh

[2018年11月更新] コメントで述べたように、min-heightを使用すると、レスポンシブデザインで問題が発生するのを回避できる場合があります

[2018年4月更新]コメントで述べたように、2011年に質問があったとき、すべてのブラウザーがビューポートユニットをサポートしているわけではありませんでした。他の答えは当時の解決策vmaxでした-IEではまだサポートされていないため、これはまだすべてにとって最善の解決策ではないかもしれません。

— セバスチャンH
ソース
9
すべての親要素の高さを100％に設定する必要がないため、これが最も簡単な答えです。これがvhの現在のサポートです-caniuse.com/#feat=viewport-units-「iOSの vhは下部ツールバーの高さを高さ計算に含めると報告されている」ため、iOSでは明らかに回避策が必要になる場合があります。
— ブライアンバーンズ
2
うわー、いい発見！過度に複雑な答えでこれらすべての人々を見てください。
— はNoName
8
2011年に質問されたとき、主要なブラウザはいずれもビューポートユニットをサポートしていませんでした。それらの「過度に複雑な答え」は、当時の唯一の選択肢でした。
— JJJ 2017
6
のmin-height: 100vh方がはるかに良いだろうというマイナーな提案。レスポンシブデザインにも対応します。
— Wiggy A.
3
これは質問の答えにはなりません。これはビューポートの100％を占めます。他の答えは正しいので、ヘッダーがビューポートのx％を占めるため、彼はこれを望まない。
— 4cody
35

実際、最良のアプローチはこれです：

html { 
    height:100%;
}
body { 
    min-height:100%;
}

これは私にとってすべてを解決し、フッターを制御するのに役立ち、ページがスクロールダウンされているかどうかに関係なく、固定フッターを持つことができます。

テクニカルソリューション-編集

歴史的に、「高さ」は「幅」と比較して最も簡単に成形するのが難しいものです。CSS <body>はスタイリングが機能することに焦点を当てているため。上記のコード-私たちは与えた<html>と<body>高さ。ここで魔法が登場します。プレイテーブルに「min-height」<body>がある<html>ので<body>、min-heightを保持するため、ブラウザよりも優れていると言えます。これにより<body>、高さがすでに早い<html>ため、オーバーライドできます<html>。言い換えると、ブラウザをだまし<html>てテーブルから「バンプ」し、独立してスタイルを設定できるようにします。

— ファロン
ソース
1
ああ、それは奇跡です！
— Geoff 2013
奇跡のように、それは機能します！しかし、お願いします：なぜmin-heightそしてheight？
— Joy、
1
@ShaojiangCai-歴史的に、「高さ」は「幅」に比べて成形が難しいため、最も簡単です。CSS <body>はスタイリングが機能することに焦点を当てているため。このコード：私たちは与えた<html>と<body>高さ。ここで魔法が登場します。プレイテーブルに「min-height」<body>がある<html>ため<body>、min-heightを保持しているため、サーバーよりも優れていることをサーバーに伝えています。これにより<body>、高さがすでに早い<html>ため、オーバーライドできます<html>。言い換えると、サーバーをだまし<html>てテーブルから「バンプ」し、独立してスタイルを設定できるようにします。
— ファロン2015年
2
@Faronここでは「サーバー」の代わりに「ブラウザ」の方が単語の選択として適しているようです。;）
— 2015
@EunLeem ...私はこれに対処するために適切な文言をどのように選択できたかについてあなたに同意します。「肘バンプ」のヒントをありがとう。それに応じて私の答えを更新しました。
— ファロン2015
14

min-heightプロパティでvhを使用できます。

min-height: 100vh;

マージンの使用方法に応じて、次のようにすることができます...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
— アルメイダカバルカンテ
ソース
10

承認されたソリューションは実際には機能しません。内容divがその親の高さに等しいことがわかりbodyます。したがって、body高さを100%に設定すると、ブラウザウィンドウの高さと等しくなります。ブラウザウィンドウの768px高さがあったとしましょう。コンテンツのdiv高さをに設定すると100%、divの高さがになります768px。したがって、ヘッダーdivが存在150pxし、コンテンツdivがになることになり768pxます。最終的に150pxは、ページの下部にコンテンツが表示されます。別の解決策については、このリンクをチェックしてください。

— dykstrad
ソース
8

HTML5でこれを行うことができます：

CSS：

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML：

<header>blabablalba </header>
<section> Content </section>
— ミゲル
ソース
高さのパーセンテージの計算に注意してください。すべての親に設定された高さがなければ、Firefoxはこれで正しく動作しません。
— TomDK、
4

私にとって、次はうまくいきました：

ヘッダーとコンテンツをdivでラップしました

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

この参照を使用して、フレックスボックスで高さを塗りつぶしました。CSSは次のようになります。

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

フレックスボックステクニックの詳細については、リファレンスをご覧ください。

— ハッシャー
ソース
1

受け入れられた答えは機能しません。そして、最高投票数の回答は実際の質問には答えません。固定ピクセル高さヘッダーと、ブラウザーの残りの表示のフィラーを使用し、owerflowのためにスクロールします。これは、絶対配置を使用して実際に機能するソリューションです。また、質問の「固定ヘッダー」の音によって、ヘッダーの高さがわかっていると思います。ここでは例として150pxを使用します。

HTML：

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

CSS :(視覚効果のみの背景色を追加）

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

これがどのように機能するかを詳細に確認するには、実際のコンテンツをに入れ、ブートストラップの行と列を使用して#Content、このjsfiddleを確認してください。

— jumps4fun
ソース
「固定ピクセル高さヘッダー」->これは正確です！bottomプロパティがあることを確認しました#Content滞在がページの最後に立ち往生。説明してくれてありがとう。
— アームフット
1
そして、それが誰かを助けてくれて嬉しいです;）
— jumps4fun
1

この例では、ページ全体がブラウザの高さの100％を占めるように、メインコンテンツのdivを液体の高さにします。

height: 100vh;

— フェザル・ハライ
ソース
1

ここに5セントを追加して、古典的な解決策を提供してください。

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>
スニペットを展開

これはすべてのブラウザで機能し、スクリプトやフレックスはありません。全ページモードでスニペットを開き、ブラウザのサイズを変更します。全画面モードでも目的の比率が維持されます。

注意：

  • 異なる背景色の要素は、実際にはお互いを覆うことができます。ここでは、要素が正しく配置されるように無地の境界線を使用しました。
  • idHeader.heightおよびidContent.top境界線を含むように調整され、境界線が使用されていない場合は同じ値を持つ必要があります。そうしないと、計算された幅に境界線、マージン、パディングが含まれないため、要素がビューポートから引き出されます。
  • left:0; right:0;width:100%ボーダーが使用されていない場合、同じ理由で置き換えることができます。
  • （スニペットとしてではなく）別のページでテストする場合、html / bodyの調整は必要ありません。
  • IE6以前のバージョンでは、要素に属性padding-topや padding-bottom属性を追加する必要があります#idOuter。

私の答えを完了するために、ここにフッターのレイアウトがあります：

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
スニペットを展開

そして、これはヘッダーとフッターの両方を持つレイアウトです：

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
スニペットを展開

— ドミトリー・バビッチ
ソース
0

IE 9以下をサポートする必要がない限り、私はflexboxを使用します

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

また、ページ全体を埋めるために本文を取得する必要があります

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
— ジェームズ・ランバート
ソース
0

CSS PLaY | クロスブラウザー固定ヘッダー/フッター/中央単一列レイアウト

CSSフレーム、バージョン2：例2、指定された幅| 456 Berea Street

重要なことの1つは、これは簡単に聞こえるかもしれませんが、このような効果を得るためにCSSファイルにかなり醜いコードが入るということです。残念ながら、それが本当に唯一の選択肢です。

— ジョー
ソース
リンクのみの回答はお勧めしません。回答にコードを含めてみてください。
— ユーザーではないユーザー
-1

これまでに見つけた最良の解決策は、ページの下部にフッター要素を設定し、フッターと展開する必要のある要素のオフセットの差を評価することです。例えば

htmlファイル

<div id="contents"></div>
<div id="footer"></div>

CSSファイル

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

jsファイル（jqueryを使用）

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

また、各ウィンドウのサイズ変更でコンテンツ要素の高さを更新したい場合があるので...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
— Αλέκος
ソース
-3

このようなことを試しましたか？

CSS：

.content {
    height: 100%;
    display: block;
}

HTML：

<div class=".content">
<!-- Content goes here -->
</div>
— ラフル・チョーダリー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.