Question

我的网站现在看起来很棒。除了iPhone，直立时，我的内容和页脚之间有一个很大的丑陋白色空间。我希望页脚始终位于内容的正下方，但同时保持正确的外观。如何让页脚自动拉伸到该内容并与页脚具有相同的颜色以填充页面的其余部分？

这是我的代码：

/********************
     Page Base 
********************/

html, body { 
height: 100%; 
width: 100%; 
overflow-x: hidden;  
margin:0; 
padding:0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px; 
-webkit-font-smoothing: antialiased; 
font-smoothing: antialiased; 
}

img, a {
border:none;
outline: none;
}

#wrapper{ 
min-height:100%;
max-height:950px;

position:relative; 
}

#header { 
width: 100%;  
height:145px; 
background-color: #fff; 
position: relative;

}   

#shadow { 
width: 1920px;  
height:145px; 
background-image:url(images/h_shadow.png);
position: relative;
z-index:-1;
margin-top:-98px;

}   

#content { 
height:auto;
position:relative;
padding:770px; 
padding-bottom:35px; 
width:100%;
display:none;
z-index:-2;
}

.contentbox{
    width:3000px;
    height:100%;
    margin-top:-770px;
    padding:0;
    right:0;
    left:0;
    background:fff;
    position:absolute;
    z-index:-1;
    margin-left:2000px;
}

#footer { 
width:100%; 
height:72px; 
position:absolute; 
bottom:0; 
left:0; 
background:#222; 
margin:0; 
padding:0; 
}

.clear {
clear:both;
}

Answer 1

看到你的html会很高兴，但是如果你相对定位你的页脚，它会自动显示在底部，正下方的任何位置。您可以将body的背景设置为与页脚相同的颜色。

CSS中的页脚自动匹配页脚高度？

1 个答案: