[英]sticky CSS footer broken
即使頁眉上方的div內容很少,我的頁腳也將停留在頁面底部。 它一直有效到最近,我似乎已經以某種方式破壞了它。 你可以看看嗎?
提前致謝。
CSS:
body {
margin: 0;
padding: 0;
height: 100%;
font: 100% Helvetica, sans-serif, Arial, sans-serif;
color: #000;
background-color: #FFF;
background-image: url(images/BGmain.png);
background-repeat: repeat-x;
}
/*----------
Div styles
----------*/
#container {
min-height: 100%;
position: relative;
}
.header {
padding: 0 0 230px 0;
text-align: center;
background-image: url(images/BGlogo_55top.png);
background-repeat: no-repeat;
background-position: top;
}
.column1 {
padding-bottom: 50px;
width: 960px;
margin: 0 auto;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
text-align: center;
}
/*----------
Other
----------*/
.plainimg {
border-style: none
}
/*----------
Text styles
----------*/
p {
font-size: 80%;
color: #333;
line-height: 150%;
text-align: left;
padding: 1px 15px 1px 15px;
}
h1 {
font-size: 100%;
color: #000;
padding: 0;
}
h2 {
font-size: 100%;
font-weight: 500;
color: #000;
padding: 0;
text-align: center;
}
/*----------
Links
----------*/
a.navlink:link, a.navlink:visited {
text-decoration: none;
display: inline-block;
color: #F1F1F1;
width: 120px;
text-align: center;
padding: 0 0 3px 0;
font-size: 80%;
}
a.navlink:hover, a.navlink:active {
text-decoration: none;
display: inline-block;
color: #FFF;
background-color: #000;
width: 120px;
text-align: centre;
padding: 0 0 3px 0;
font-size: 80%;
}
a:link, a:visited {
text-decoration: none;
color: #AEAEAE;
}
a:hover, a:active {
text-decoration: underline;
color: #999
}
div的安排如下:
<div id=container>
<div class=header></div>
<div class=column1></div>
<div class=footer></div>
</div>
看看這個: http : //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
在過去對我來說很糟糕的時候,內容通常是罪魁禍首-填充,無效標記等。如果您在頁面上發布鏈接,則可能會找到更具體的答案。
正如Jason McCreary所說,您需要為html
CSS添加高度。
采用:
html
{
height: 100%;
margin: 0;
padding: 0;
}
在您的頁面上,由於某種原因,這會觸發無關的滾動條。
更新:
滾動條似乎由.footer h6
的溢出觸發。
bottom: 2.5ex;
:
bottom: 2.5ex;
和
line-height: 1;
到
footer
樣式似乎清除了這一點。
但是更好的方法是使用CSS重置 。
無需重置,至少添加:
.footer h6 {
margin: 0;
padding: 0;
}
。
CSS重置還將最大程度地減少跨瀏覽器的差異,這種差異會破壞平台之間的布局。
這是您的問題:
#container {
min-height:100%;
position:relative;
}
解決方法是:
#container {
min-height:100%;
}
好東西:
解決了。 簡單的解決方案只需將頁腳分區放在容器分區之外。
<div id=container>
<div class=header></div>
<div class=column1></div>
</div>
<div class=footer></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.