將虛擬列向下延伸到粘性頁腳

我是使用CSS的新手，並且一直在閱讀教程和查看示例代碼。現在，我使用虛擬列方法as described by Keith Donegan at Code-Sucks.com和粘性頁腳解決方案as described by Steve Hatcher。將虛擬列向下延伸到粘性頁腳

我已閱讀已發佈的有關將div標籤擴展到頁面底部的類似問題，但它們似乎不適用於我。我將所有包含的CSS類中的高度和最小高度設置爲100％，但似乎不起作用。

此外，當我的「包裝器」推入頁腳時，當前代碼存在無邊距問題。我想要一個不錯的5px邊距，但它完全消失。

以下是我的CSS。爲了便於閱讀，我已經拿出了很多評論和評分。

* {margin:0;padding:0;} 

html {height: 100%;} 

body { 
    height: 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 

} 

#wrapper { 
margin: auto; 
width: 922px; 
height: 100%; 

} 

#main {overflow:auto; 
    padding-bottom:155px; /* must be same height as the footer */ 
    } 

#faux { 
background: #CCCCCC; 
margin-bottom: 5px; 
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */ 
width: 100% 
min-height:100%; 
} 
#header { 
color: #333; 
width: 902px; 
padding: 10px; 
height: 100px; 
margin: 0px 0px 5px 0px; 
background: #ABBEBE; 
position: relative; 
} 
#leftcolumn { 
display: inline; 
color: #333; 
margin: 10px; 
padding: 0px; 
width: 195px; 
float: left; 
min-height: 100%; 
} 
#rightcolumn { 
float: right; 
color: #333; 
margin: 10px; 
padding: 0px; 
width: 683px; 
display: inline; 
position: relative; 
min-height: 100%; 
} 


#footer {position: relative; 
margin: 5px auto; 
width: 902px; 
    margin-top: -155px; /* negative value of footer height */ 
    height: 130px; 
    clear:both; 
    background: #ABBEBE; 
    color: #333; 
    padding: 10px; 
    } 

#.clear { clear: both; background: none; }

我的HTML如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Faux Column CSS Layouts - 2 Column - faux-1-2-col</title> 
<link rel="stylesheet" type="text/css" href="main.css" /> 
</head> 
<body> 
    <!-- Begin Wrapper --> 
    <div id="wrapper"> 
     <div id="main"> 
     <!-- Begin Header --> 
     <div id="header"> 
       This is the Header   
     </div> 
     <!-- End Header --> 
     <!-- Begin Faux Columns --> 
     <div id="faux"> 
       <!-- Begin Left Column --> 
       <div id="leftcolumn"> 
       </div> 
       <!-- End Left Column --> 
       <!-- Begin Right Column --> 
       <div id="rightcolumn"> 
        <h1>Faux Column CSS Layouts</h1>  
        <p> 
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> 

         <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.    
         </p> 
       <div class="clear"></div> 
       </div> 
       <!-- End Right Column --> 
       <div class="clear"></div> 
     </div>  
     <!-- End Faux Columns --> 
     </div> 
    </div> 
    <!-- End Wrapper --> 
    <!-- Begin Footer --> 
     <div id="footer">  
       This is the Footer  
     </div> 
     <!-- End Footer --> 
</body> 
</html>

任何幫助，將不勝感激。

來源

2011-08-10 saccharine

[提問小提琴（http://jsfiddle.net/NGLN/aTJba/） – NGLN

這應該可以解決您的問題

#main { 
    overflow:hidden; 
    height: 100%; 
} 

#faux { 
    background: #CCCCCC; 
    margin-bottom: 5px; 
    overflow: auto; 
    width: 100%;   /* <<-- you have forgot the ; at the end */ 
    min-height:100%; 
}

來源

2011-08-22 15:38:00 Michael

我在工作中我了，所以我不能檢查這一點，但如果這是真的，我會打我自己。我也將切換到IDE。 – saccharine

我也修改了#main，所以不要忽略它。 – Michael

對#main的更改省略了填充，沒有這些#main將推入頁腳，導致主要遇到頁腳的文本丟失。當我加入100％身高狀態後，我會嘗試它。 – saccharine

將虛擬列向下延伸到粘性頁腳

回答

相關問題