CSS布局，頂部和底部固定，中間高度可變

Question

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

頂部和底部是固定的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> 

由此，頁腳顯示在底部，但是Content div仍會填充整個窗口，該窗口應該是[window-footer]高度。

Answer 1

使用絕對定位而不指定高度來定位中間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> 

使用“整頁”選項可以正確查看代碼段。

Answer 2

html

<div id="main">
<div id="header"> Header Content</div>    
<div id="content">
    <ul><li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>           
        </ul>
</div>
<div id="footer">I am Footer
</div>

的CSS

      body { margin: 0;}
#main{
   position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow:scroll;               
}
#footer
{
      position: absolute;
      height: 41px;
      bottom: 0;
      left: 0;
      right: 0;
      text-align:center;
      display:block;
      background: blue;
}

li{
    text-decoration: none;
    display: block;
    height: 20px;
    width: 100%;
    padding: 20px;

}

JSFIDDLE演示

Answer 3

我想這就是你想要的...

JSBin： http ： //jsbin.com/ebilag/1/

CSS：

html, body {
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    background: yellow;
}

.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: grey;
}

.middle {
    padding-top: 100px;
    padding-bottom: 100px
}

HTML：

<div class="container">

    <div class="top">Top</div>

    <div class="middle">Middle</div>

    <div class="bottom">Bottom</div>

</div>

Answer 4

如果您不知道頁眉或頁腳的大小，並且可以使用CSS3，那么我建議您使用flexbox布局。

以下示例（或查看小提琴 ）

HTML：

<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">bottom</div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 400px;
}

.header {
  flex-grow: 0;
  background-color: red;
}
.content {
  flex-grow: 1;
  background-color: green;
}
.footer {
  flex-grow: 0;
  background-color: blue;
}

Answer 5

如果您知道頁眉和頁腳的高度...

那么您可以使用box-sizing屬性輕松完成此操作。

像這樣：

FIDDLE1 FIDDLE2

.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;
}

Answer 6

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>

Answer 7

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%;
}

演示

Answer 8

請嘗試以下方法：

的HTML

<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>

的CSS

html,body{
  marign: 0;
  padding: 0;
  height: 100%;
}
#header {
  height: 100px;
  position: fixed;
  top: 0;
  left:0;
  right: 0;
  background: orange;
}
#footer {
  height: 100px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: green;
}
#content {
  padding-top: 100px;
  padding-bottom: 100px;
  height: -webkit-calc(100% - 200px);
  height: -moz-calc(100% - 200px);
  height: -ms-calc(100% - 200px);
  height; -o-calc(100% - 200px);
  height: calc(100% - 200px);
  background: #ccc;
}

請觀看演示 。

Answer 9

我認為您應該在頁面加載期間使用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();
});