45 
+-------------------+
|    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>

由此，页脚显示在底部，但内容 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 回答
9

如果您不知道页眉或页脚的大小并且可以使用 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;
}
于 2016-02-16T11:51:21.893 回答
7

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 演示

于 2013-06-17T07:45:37.697 回答
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>
于 2013-06-17T07:21:08.190 回答
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="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;
}

请查看演示。

于 2013-06-17T07:22:09.837 回答
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 回答