10

我正在尝试创建一个网页布局，其中包含页眉/页脚（100% 宽度，145px 高度）、页眉/页脚（100% 宽度、动态高度）之间的“主要区域”以及内容周围的容器独特的背景颜色（860 像素宽度，动态高度，但始终与页脚“齐平”）。

（参见示例以获得视觉效果）

我遇到的问题是，当内容最少时，我似乎无法让“内容容器”始终与页脚齐平。如果存在可观/“正常”数量的内容或调整了窗口大小，则使用（原始示例）之类的设置会导致页脚浮动在内容上。

并且下面的 CSS 会导致内容和页脚之间出现间隙。

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

当内容最少并且页脚“粘”到页面底部时，如何使内容容器成为屏幕的整个高度，同时如果有正常数量的内容（页脚是总是在内容的底部）？

谢谢！

4

2 回答 2

12

小提琴：http : //jsfiddle.net/3R6TZ/2/

小提琴输出： http: //fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

更新

和用于填充#content div，而不使用填充或边距，这会使盒子大小超过 100% 高度，从而导致问题#content-spacer-top。#content-spacer-bottom

在 CSS3 中，有一个box-sizing属性（更多信息在这里）可以解决这个问题，但我假设你不想依赖 CSS3 特性。

编辑

添加了修复并测试到 IE7

更新 2

使用:before和:after伪元素代替间隔 div 的替代方法：http: //jsfiddle.net/gBr58/1/

虽然不能在 IE7 或 6 中工作，但要在 IE8 中工作，<!DOCTYPE>必须声明 a（根据w3schools.com），但 HTML 很好而且干净

更新3（抱歉更新这么多）

将其更新到 IE6。我通常不会打扰，因为我的公司不支持 IE6，但这是一个简单的修复......

于 2013-05-02T00:34:16.313 回答
0

我认为您需要 position: 固定在页脚上：

footer {
    width: 100%;
    height: 30px;
    position:fixed;
    bottom:0;
}
于 2013-05-01T16:55:14.227 回答