Question

我是使用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>

任何帮助都将不胜感激。

Answer 1

这应该可以解决您的问题

#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%;
}

将人造柱延伸至粘性页脚

1 个答案: