【发布时间】：2012-12-12 07:33:51
【问题描述】：
我正在尝试制作这个模板，稍后我将把它转换为 WordPress 主题。我遇到的问题与这篇文章类似：Make div stay at bottom of page's content all the time even when there are scrollbars 但是当我尝试了该帖子的解决方案时，但对我不起作用。
我想要的是页脚位于页面的最底部（如果内容长于查看者的浏览器窗口，则从视图中隐藏）而不是将其固定在窗口底部。
所有顶部内容（导航、栏、徽标等）都位于我想要的位置。但是页脚和页脚上方的链接并不位于页面的最底部。相反，当它第一次加载时，它会将自己定位在页面的底部。它拥有的内容越多，它就会停留在它第一次加载的区域中。请看下面的截图：
以下是页面的 HTML/CSS：
HTML
<div id="blackbar"></div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Home</a></li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>Contains post content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 • Champaign, Illinois 61826–6537</li>
<li>217–352–4232</li>
<li>example@broerenrusso.com</li>
<li>© 2012 Broeren Russo Inc.</li>
</ul>
</div>
CSS
/*General Implementations*/
body {
background: #6CF;
width: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar {
background: #000;
height: 55px;
position: absolute;
top: 25px;
/*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar {
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img {
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper {
width: 798px;
height: 100%;
float: left;
position: absolute;
left: 15%;
/*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper {
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight', Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul {
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li {
display: inline-block;
width: 114px;
/*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover {
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a {
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar {
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img {
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar {
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content {
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline {
background: #000;
height: 302px;
}
/*content block*/
#content {
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper {
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline {
float: right;
font-family: 'RobotoMedium', Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation {
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post {
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink {
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight', Arial, sans-serif;
}
/*Main footer*/
#footer {
position: absolute;
bottom: 0;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul {
width: 684px;
margin: 0 auto;
}
#footer ul li {
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight', Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last { margin: 0; }
我知道部分问题在于所有顶部内容（导航、顶部的白条等）都包含position: absolute; CSS。但我想保留这个 CSS 声明。如何让页脚上方的链接和页脚本身位于页面/内容的底部而不是位于窗口的底部？
【问题讨论】：
-
尝试将
footer ul{width:684px;}改为footer ul{width:100%;} -
每当我必须玩页脚时，这是我第一个去的地方..cssstickyfooter.com
-
@Vucko 我将
footer ul设置为width: 684px的原因是因为我想让该区域与页面的主要内容一起移动。为此，需要定义宽度。 -
@Scorpio 我查看了您评论中的页面，这并不是我想要的。我想要的是页脚位于页面底部，而不总是在窗口中可见。