gpt4 book ai didi

html - 页眉和页脚之间的 100% 高度 div

转载 作者:太空狗 更新时间:2023-10-29 13:11:54 26 4
gpt4 key购买 nike

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

( See Example for a visual )

我遇到的问题是,当内容最少时,我似乎无法让“内容容器”始终与页脚齐平。使用像 ( original example ) 这样的设置会导致页脚 float 在内容之上,如果有可观/“正常”的内容量或窗口大小调整的话。

下面的 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/

fiddle 输出: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-spacer-top#content-spacer-bottom用于填充 #content div,而不使用填充或边距,因为填充或边距会使框大小超过 100% 高度,从而导致问题。

在 CSS3 中,有 box-sizing属性 ( more info here) 可以解决此问题,但我假设您不想依赖 CSS3 功能。

编辑

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

更新 2

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

尽管在 IE7 或 6 中不起作用,但要在 IE8 中工作,<!DOCTYPE>必须声明(根据 w3schools.com ),但 HTML 非常干净

更新 3(抱歉有这么多更新)

更新它以适用于 IE6。我通常不会打扰,因为我的公司不支持 IE6,但这是一个简单的修复...

关于html - 页眉和页脚之间的 100% 高度 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16322610/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com