100％最小高さCSSレイアウト

幅広いブラウザで最小高さ100％の要素を作成する最良の方法は何ですか？

特に、headerとfooterの固定のレイアウトがある場合height、

どのようにして、下部に固定された状態で、中間のコンテンツ部分100%をその間のスペースで埋めfooterますか？

私は次のものを使用しています：CSSレイアウト-100％高さ

最小の高さ

このページの#container要素のmin-heightは100％です。このように、ビューポートが提供するよりも高いコンテンツが必要な場合、＃contentの高さは#containerも同様に長くします。#contentの可能な列は、＃containerの背景画像で視覚化できます。divはテーブルセルではなく、そのような視覚効果を作成するために物理要素は必要ありません（または必要ありません）。まだ納得していない場合は、直線や単純な配色ではなく、ぐらついた線やグラデーションを考えてください。

相対配置

#containerには相対的な位置があるため、＃footerは常に一番下に留まります。上記のmin-heightは#containerのスケーリングを妨げないため、＃contentが#containerを長くする場合でも（または特にその場合）これは機能します。

パディングボトム

通常のフローではなくなったため、＃contentのpadding-bottomは絶対的な#footerのためのスペースを提供します。このパディングはデフォルトでスクロールされた高さに含まれているため、フッターが上記のコンテンツと重複することはありません。

このレイアウトをテストするには、テキストサイズを少し拡大するか、ブラウザウィンドウのサイズを変更します。

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

私にとってはうまくいきます。

どこかにロックされたカスタムの高さを設定するには：

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

以下はvh、またはviewpoint heightに基づく別のソリューションです。詳細については、CSSユニットにアクセスしてください。これは、代わりにflexを使用するこのソリューションに基づいています。

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

単位はvw、vh、vmax、vminです。基本的に、各単位はビューポートサイズの1％に相当します。したがって、ビューポートが変化すると、ブラウザはその値を計算し、それに応じて調整します。

詳細については、こちらをご覧ください。

具体的には：

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

kleolb02の答えはかなりよさそうです。別の方法は、スティッキーフッターと最小高さのハックの組み合わせです

以下のためにmin-heightそれの親ノードを継承しながら作業を正しく割合で、min-heightトリックは、親ノードの高さを設定することであろう1pxし、その後、子供のはmin-height正しく動作します。

デモページ

純粋なCSSソリューション（#content { min-height: 100%; }）は多くの場合に機能しますが、すべての場合、特にIE6とIE7では機能しません。

残念ながら、目的の動作を実現するには、JavaScriptソリューションを使用する必要があります。これは、コンテンツに必要な高さを計算<div>し、関数のCSSプロパティとして設定することで実行できます。

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

次に、この関数をonLoadとonResizeイベントのハンドラーとして設定できます。

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

サイドバーがあり、フッターに合わせてスペースを埋めるために親コンテナーが100％に設定されているので、Levikに同意します。フッターに合わせて100％に設定することはできません。つまり、クリア機能を使用すると、フッターが押し下げられてしまいます。

たとえば、ヘッダーの高さが50pxでフッターの高さが50pxで、残りのスペースにコンテンツがちょうど100pxのように自動調整され、ページコンテナーがこの値の100％の場合、高さは200pxになります。次に、サイドバーの高さを100％に設定すると、ヘッダーとフッターの間にぴったり収まるはずですが、200pxになります。代わりに、サイドバーがページコンテナと同じ高さに設定されているため、最終的には50px + 200px + 50pxになるため、ページは300pxになります。ページのコンテンツに大きな空白があります。

私はInternet Explorer 9を使用していますが、これがこの100％の方法を使用した場合の効果です。私は他のブラウザで試したことはありませんが、他のいくつかのオプションで動作する可能性があると思います。しかし、それは普遍的ではありません。

最初にdivの後にdivwith を作成し、次にこれを行うだけです。id='footer'content

HTMLは次のようになります。

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

そしてCSS：

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

これを試して：

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divcontent divの下の要素にはが必要clear:bothです。

おそらく最も短いソリューション（最新のブラウザでのみ機能します）

CSSの作るのこの小片"the middle content part fill 100% of the space in between with the footer fixed to the bottom"：

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

唯一の要件は、高さが固定されたフッターが必要であることです。

このレイアウトの例：

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

このCSSが必要です：

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

これを試すことができます：http : //www.monkey-business.biz/88/horizo​​ntal-zentriertes-100-hohe-css-layout/ これは、高さが100％で、中央が水平です。

私が使用したものを共有するだけで、うまく機能します

#content{
        height: auto;
        min-height:350px;
}

Afshin Mehrabaniの回答で述べたように、bodyとhtmlの高さを100％に設定する必要がありますが、そこにフッターを取得するには、ラッパーの高さを計算します。

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}