1
我正在嘗試製作此模板，我將在稍後將其轉換爲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>[email protected]</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％;}' – Vucko
每當我必須使用footer進行遊戲時，這是我第一次使用..http：// www.cssstickyfooter.com/ – Scorpio
@Vucko我將'footer ul'設置爲'width：684px'的原因是因爲我想讓該區域隨着頁面的主要內容一起移動。爲了發生這種情況，需要定義一個寬度。 – Abriel