1

这太基础了，我不好意思贴出来。

基本上每当我在 wrap div 内添加横幅时，主 div 都不会保持它的高度。我一辈子都无法让它延伸到页脚。将标头从包装标签中取出也无济于事。

彻底搜查，一无所获！对不起这样的基本问题

原始代码来自http://www.cssstickyfooter.com/

HTML

<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<div id="wrap">
<div id="header">
<img src="banner.png">
</div>
<div id="main">

</div>

</div>

<div id="footer">

</div>
</body>
</html>

CSS

 /*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {
    min-height: 100%;
    background-color: #666;
    width: 100%;}
#header
{
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
#main 
{   overflow:auto;
    padding-bottom: 150px; /* must be same height as the footer */
    background-color: #FFF;
    height: 100%;}  

#footer
    {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    background-color: #333;}
4

0 回答 0