web-dev-qa-db-ja.com

CSS、親の高さに達するまで垂直方向にdivを伸ばす

pageWrapperコンテナにラップされ、列に3つのdivがあります。最初（ヘッダー）と最後（navWrapper）の高さは固定されています。親のdivpageWrapperが最大の高さ（ブラウザのビューポートによる）に達するまで高さを伸ばすには、真ん中の1つ（contentWrapper）が必要です。

この問題のスキーマを描画します。 enter image description here

これが私の現在のソリューションのフィドルです。http://jsfiddle.net/xp6tG/

そしてここにコード

CSSとHTML

html, body{
  height: 100%;
}

body{
  background-color: #E3E3E3;
}

#pageWrapper{
  margin: 0 auto;
  position: relative;
  width: 600px;
  height: 100%;
}

header{ 
  display:block;
  width: 100%;
  height: 100px;
  background: yellow;
}

#contentWrapper{
  width: 100%;
  height: 100%;
  background: blue;
}

#navWrapper{
  width: 100%;
  height: 100px;
  background: green;
}
<div id="pageWrapper">
  <header>
    Header
  </header>
  <div id="contentWrapper">
    Content
  </div>
  <div id="navWrapper">
    Nav
  </div>
</div>

ほぼ機能していますが、高さが高すぎるため、垂直スクロールバーが表示されます。

csshtmlheightstretch
9
Very Curious

これを行う1つの方法があります。

次の[〜＃〜] css [〜＃〜]を適用します。

html, body{ height: 100%; margin: 0;}
body{ background-color: #e3e3e3;}

#pagewrapper{
    margin: 0 auto;
    position: relative;
    width: 600px;
    height: 100%;
}
header{ 
    display:block;
    width: 100%;
    height: 100px;
    background: yellow;
}
#contentwrapper{
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    background: blue;
}
#navwrapper{
    width: 100%;
    position: absolute;
    height: 100px;
    bottom: 0px;
    left: 0;
    background: green;
}

headerおよび#navwrapperブロック要素に高さを指定したので、親#pagewrapperブロックに対する絶対配置を使用して、#contentwrapperの下部および上部オフセットを設定できます。 #navwrapperの下部オフセット。

スクロールバーが表示された場合は、htmlタグまたはbodyタグのいずれかにmargin: 0を設定する必要がある場合があります。

デモフィドル： http://jsfiddle.net/audetwebdesign/yUs6r/

10
Marc Audet

CSSが呼び出された後、このスクリプトをセクションに追加してみてください。それはあなたの頭/足の要素の高さを見つけて、中央のdivの高さを画面いっぱいにします。ヘッダー/フッター要素の高さを動的にすることにした場合でも、このスクリプトは機能するため、これは適切です。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var totalHeight = $('#pageWrapper').height();
        totalHeight -= $('header').height();
        totalHeight -= $('#navWrapper').height();

        // Remove an extra 20px for good measure
        totalHeight -= 10;

        $('#contentWrapper').css('height', 'auto');
        $('#contentWrapper').css('min-height', totalHeight);
});
</script>
2
Josh