1

これはとても基本的なことなので、投稿するのが恥ずかしいです。

基本的に、ラップ 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