Question

这是如此基本，我很尴尬发布它。

基本上每当我在换行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;}

应用粘性页脚，无法设置内容Div高度与标题

0 个答案: