9

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

この問題 のスキーマを描きます。ここに画像の説明を入力

これが私の現在のソリューション のフィドルです。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>

ほとんど機能していますが、高さが高すぎて、垂直スクロールバーが表示されます。

4

2 に答える 2

11

ここにそれを行う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

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

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

于 2013-08-06T01:28:14.280 に答える
2

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>
于 2013-08-06T01:34:02.687 に答える