Question

我的简单布局包含标题，主要部分和页脚。页脚被推到页面底部。我希望主要部分占据页眉和页脚之间的所有空间。

这是我所做的：http://jsfiddle.net/5d3m9/

HTML

<div class="wrap">
   <header>header</header>
   <div class="main">lorem2000 </div>
   <div class="clear"></div>
   <footer>@Copyright</footer>
</div>

CSS

html, body {
    height: 100%;
}

body {
    margin: 0;
}

header {
    height: 150px;
    background: orange;
}
.wrap {
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.main {
    background: #00eaea;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}
.clear {
    height: 50px;
}
footer {
    background: #dadada;
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

还有其他/更好的方法来实现这一目标吗？（没有padding-bottom: 32767px; margin-bottom: -32767px;）

Answer 1

将以下样式应用于.main

.main {
    background: #00eaea;
    top: 150px;
    bottom: 50px;
    position:absolute;
    width: 100%;
}

http://jsfiddle.net/5d3m9/1/

内容占用页眉和页脚之间的所有空间

1 个答案: