![](/img/trans.png)
[英]Can't make 100% div height between header and footer with Bootstrap 4
[英]100% height div between header and footer
我正在尝试创建一个页眉/页脚(100%宽度,145px高度),页眉/页脚之间的“主要区域”(100%宽度,动态高度)和围绕内容的容器的网页布局独特的背景颜色(860px宽度,动态高度,但始终与页脚“齐平”)。
( 见视觉示例 )
我遇到的问题是,当内容很少时,我似乎无法让“内容容器”始终与页脚齐平。 如果存在可观的/“正常”内容量或者窗口调整大小,则使用类似( 原始示例 )的设置会导致页脚浮动在内容上。
以下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
属性( 这里有更多信息 )可以解决这个问题,但我假设你不想依赖CSS3功能。
编辑
添加了修复程序并测试到IE7
更新2
替代方法使用:before
和:after
伪元素而不是spacer divs: http : //jsfiddle.net/gBr58/1/
但是在IE7或6中不起作用,并且要在IE8中工作,必须声明<!DOCTYPE>
(根据w3schools.com ),但是HTML很干净
更新3 (很抱歉这么多更新)
更新它以适应IE6。 我通常不会打扰,因为我的公司不支持IE6,但它很容易解决...
我认为你需要的位置:固定在页脚上:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.