頁腳底部的內容溢出頁腳

我的頁面佈局頁腳仍然在頁面的底部。問題是當我使用一些內容爲FLOAT的div時。如果我省略了浮動內容，則內容行爲正常並且不會溢出頁腳。請參閱：頁腳底部的內容溢出頁腳

`enter code here` 
http://jsfiddle.net/8o7t4wq9/1/ 


CSS: 
html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

HTML: 
<div id="container"> 
    <div id="header"></div> 
    <div id="body"> 
     <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div> 
     <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">First box of content</div> 
     <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">Second box of content</div> 
    </div> 
    <div id="footer">FOOTER</div> 
</div>

來源

2015-06-17 Lukáš Ježek

'頁腳{明確：既;}' – madalinivascu

#footer { 
    position:absolute;//remove 
    bottom:0;//remove 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
    clear:both;//add 
}

來源

2015-06-17 11:33:16 madalinivascu

嘗試父DIV添加到您的浮動的div添加clearfix父。

html, 
 
body { 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
} 
 
#container { 
 
    min-height:100%; 
 
    position:relative; 
 
} 
 
#header { 
 
    background:#ff0; 
 
    padding:10px; 
 
} 
 
#body { 
 
    padding:10px; 
 
    padding-bottom:60px; /* Height of the footer */ 
 
} 
 
#footer { 
 
    position:absolute; 
 
    bottom:0; 
 
    width:100%; 
 
    height:60px; /* Height of the footer */ 
 
    background:#6cf; 
 
} 
 

 
.clearfix:after { 
 
\t visibility: hidden; 
 
\t display: block; 
 
\t font-size: 0; 
 
\t content: " "; 
 
\t clear: both; 
 
\t height: 0; 
 
\t }

<div id="container"> 
 
    <div id="header"></div> 
 
    <div id="body"> 
 
     <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div> 
 
     <div class="clearfix"> 
 
      <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">First box of content</div> 
 
      <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">Second box of content</div> 
 
     </div> 
 
    </div> 
 
    <div id="footer">FOOTER</div> 
 
</div>

來源

2015-06-17 11:35:37 Roi

大，非常感謝，現在的工作罰款（關於建議刪除絕對位置，我不能這樣做，因爲如果內容是短於頁面的高度，那麼頁腳不會坐下，但無論如何感謝） –

很難找準/看到您的問題widouth小提琴，但你或許應該看看CSS clearfix

添加CSS類（clearfix）集裝箱

.clearfix:after{ 
    content: ""; 
    display:table; 
    clear:both; 
}

更多info和cros瀏覽器支持看看這個帖子What is a clearfix?

來源

2015-06-17 11:36:32

我已經把鏈接到提琴在我的問題，這是http://jsfiddle.net/8o7t4wq9/1/ –

你可以看到你可以添加clearfix到你的代碼http://jsfiddle.net/mzvaan/53h36Lht/ –

-1

刪除position:absolute和bottom:0，從footer並添加clear:both。

#footer { 
    width:100%; 
    height:60px; 
    background:#6cf; 
    clear:both; 
}

來源

2015-06-17 11:38:20 099

頁腳底部的內容溢出頁腳

回答

相關問題