html – 页眉和页脚之间的100％height div

发布时间：2020-12-14 18:59:38 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个页眉/页脚(100％宽度,145px高度)的网页布局,页眉/页脚(100％宽度,动态高度)之间的“主要区域”以及围绕内容的容器独特的背景颜色(宽860px,动态高度,但总是与页脚相反). (See Example for a visual) 我遇到的问题是,当内容最小时,我似乎无

我正在尝试创建一个页眉/页脚(100％宽度,145px高度)的网页布局,页眉/页脚(100％宽度,动态高度)之间的“主要区域”以及围绕内容的容器独特的背景颜色(宽860px,动态高度,但总是与页脚相反).

(See Example for a visual)

我遇到的问题是,当内容最小时,我似乎无法使用“内容容器”与页脚齐平.使用像(original example)这样的设置会导致页脚浮动在内容上,如果有一个可观的/’正常’的内容量,或者窗口被调整大小.

并且以下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;
}

如果内容最小,并且页脚“粘贴”到页面的底部,那么如何使内容容器成为屏幕的全部高度,同时如果存在正常的内容量,则动态调整大小(页脚为总是在内容的底部)？

谢谢！

解决方法

FIDDLE： 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>

UPDATE

#content-spacer-top和#content-spacer-bottom用于填充#content div,而不使用将使盒子大小超过100％高度的填充或边距导致问题.

在CSS3中,有一个可以解决这个问题的box-sizing属性(more info here),但是我假设你不想依赖CSS3的功能.

编辑

添加了一个修复程序,并测试到IE7

更新2

替代方法使用：before和：之后伪元素而不是spacer divs：
http://jsfiddle.net/gBr58/1/

在IE7或6中不起作用,并且在IE8中工作,<！DOCTYPE>必须声明(根据w3schools.com),但HTML是好的和干净的

更新3(对不起这么多更新)

将其更新为IE6.我通常不打扰我的公司不支持IE6,但这是一个容易的修复…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!