我有一个带有粘性页脚的CSS布局。该网站的主要部分是一些侧栏和一个内容框。但是我似乎不能让上下文框和周围的div扩展到"100%“的高度。
如果内容框包含短文本,则它不会跨越整个高度,如果它包含大量文本,则周围的div不会跨越整个高度。
结果应该是一个站点,其中内容框和浮动背景扩展到页面底部,恰好在页脚的上方。
编辑:将"overflow: hidden“添加到#inner修复了背景不能与长内容对齐的问题。但是我仍然不能让#content div扩展到整个页面的高度。
http://jsfiddle.net/s6yf3/ (维基百科的徽标只是为了更好的可视化)
<div id="wrapper">
<div id="inner">
<header>
<a href="#">
<img src="//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Logo" width=400 height=100 />
</a>
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
</ul>
</nav>
</header>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec libero vitae massa bibendum molestie ac non justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent in dui arcu, nec ornare nibh.
</div>
<div id="sidebar">
<div>Element</div>
<div>Element</div>
<div>Element</div>
</div>
</div>
</div>
<div id="footer">
<p>Sticky Footer</p>
</div>body {
margin:0;
padding:0;
background:#eee;
}
html,body {
height:100%;
}
#wrapper {
width:400px;
height: auto !important;
height:100%;
margin:0 auto;
min-height:100%;
}
#inner {
height: 100%;
padding:0 0 55px 0;
background-color: #ccc;
background-image: url(//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png);
background-repeat: repeat-x;
background-position: right bottom;
overflow: hidden;
}
#inner p {
margin:1em 1em 0;
padding:.15em .25em;
}
#inner header {
margin: 0;
padding: 0;
height: 160px;
}
#wrapper header nav ul {
list-style-type: none;
margin-top: 4px;
padding-left: 240px;
height: 46px !important;
z-index: 999;
position: absolute;
}
#wrapper header nav ul li {
display: inline-block;
}
#wrapper header nav ul li a {
font-size: 16px;
font-weight: bold;
color: #000;
height: 40px !important;
line-height: 40px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
display: block;
}
#wrapper header nav ul li a:hover {
background-color: #333 !important;
color: #fff;
z-index: 2;
}
#wrapper header nav ul li.active a {
font-size: 18px;
font-weight: bold;
background-color: #333 !important;
color: #fff;
height: 46px !important;
line-height: 46px;
display: block !important;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
#sidebar div {
width: 100px;
min-height: 60px;
background-color: #ddd;
margin-bottom: 20px;
}
#content {
width: 250px;
height: 100%;
position: relative;
float: right;
background-color: #ddd;
}
#footer {
width:400px;
height:55px;
margin:-55px auto 0;
background:#222;
overflow:hidden;
}
#footer p{
margin:0;
padding:.5em 0 0;
font-weight:bold;
text-align:center;
color:#FFF;
}发布于 2013-02-18 02:16:35
因为# removed和#wrapper的高度是100%,所以我把#footer放在#removed里面,去掉了65px的底部填充。
jFiddle:http://jsfiddle.net/rPGTq/
<div id="wrapper">
<div id="inner">
<header>
...
</header>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
<div id="footer">
<p>Sticky Footer</p>
</div>
</div>
</div>https://stackoverflow.com/questions/14923239
复制相似问题