45 
+-------------------+
|    Top (fixed)    |
+-------------------+
|                   |
|                   |
|   Middle (fill)   |
|                   |
|                   |
+-------------------+
|   Bottom (fixed)  |
+-------------------+

上下は固定divです。これらは、ブラウザ ウィンドウの上部と下部に配置されます。上部の div と下部の div の間のウィンドウの残りの部分を中央部分で埋めたいと思います。

コンテンツが高さを超えている場合は、スクロールバーを使用できます。ただし、そのサイズはウィンドウを超えてはなりません。

私のCSSとHTML：

html, body, #main
{
  height: 100%;
}
#content
{
  background: #F63;
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -100px;
}
#footer
{
  position: fixed;
  display: block;
  height: 100px;
  background: #abcdef;
  width: 100%;
}
<div id="main">
  <div id="content">xyz</div>
  <div id="footer">abc</div>
</div>

これから、フッターは下部に表示されますが、コンテンツ div は [window-footer] の高さである必要があるウィンドウ全体をまだ埋めています。

4

9 に答える 9

66

高さを指定せずに絶対配置を使用して中央の div を配置します。これほど単純なことはありません:

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

スニペットを適切に表示するには、「全ページ」オプションを使用します。

于 2013-06-17T07:29:16.187 に答える
2

ヘッダーとフッターの高さが分かれば…

次に、プロパティを使用してこれを簡単に行うことができbox-sizingます。

そのようです：

フィドル 1 フィドル2

.container
{
    height: 100%;
    background: pink;
    margin: -64px 0;
    padding: 64px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    overflow:auto;
    height:100%;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
    position: relative;
    z-index:1;
}
于 2013-06-17T07:25:40.643 に答える
1

のソリューションtop and bottom paddingは問題ありませんが、メイン フレームが として設計されている別のアプローチをお勧めしtableます。これはより柔軟で、css を変更せずに頭や足を隠すことができます。

スタイラス (CSS):

html,
body
  height: 100%
.container
  display: table
  height: 100%
.head,
.foot,
.content
  display: table-row
  box-sizing: border-box
.head,
.foot
  height: 70px
  background: #ff0000
.content
  overflow: auto
.scroll
  height: 100%
  overflow: auto
  box-sizing: border-box

HTML:

<div class="container">
  <div class="head">...</div>
  <div class="content">
    <div class="scroll">...</div>
  </div>
  <div class="foot">...</div>
</div>
于 2014-11-06T13:39:19.703 に答える
0

HTML:

<div id="main">
    <div id="header">I am Header
    </div>
    <div id="content">I am the Content
    </div>
    <div id="footer">I am Footer
    </div>
</div>

CSS:

#main{width:100%;height:100%;}
#header
{
    position:relative;
    text-align:center;
    display:block;
    background:#abcdef;
    height:40px;
    width:100%;
}
#content
{
    background: #F63;
    width:100%;
    text-align:center;
    height:auto;
    min-height:400px;
}
#footer
{
    position:relative;
    text-align:center;
    display:block;
    background:#abcdef;
    height:40px;
    width:100%;
}

デモ

于 2013-06-17T07:18:19.623 に答える
0

私の意見では、js/jquery を使用して、ページの読み込み中に #content の高さを変更する必要があります。これは次のようになります (以下のコードはテストしていないので、必要に応じて変更してください)。

$().ready(function(){
  var fullHeight= function(){
  var h=$(window).height()-100; //100 is a footer height
  $('#content').css('min-height',h+'px');
};

$(window).resize(fullHeight);
fullHeight();
});
于 2013-06-17T07:31:06.520 に答える