Firefox 上的 CSS 布局问题，在左列末尾和页脚之间填充空间

Question

基本上，左列应该以连续的红色延伸到页脚。但是，在 Firefox 中，在包含大量文本的页面上，该列不会延伸到页脚并留下很大的空白 - 参见网站：http://library.luhs.org/JHSII/about.html

我尝试过重新调整高度、创建粘性页脚以及我在本网站上读到的其他内容。所以我承认我被难住了，真正奇怪的是布局似乎在 IE 中工作，因为没有空白！我没有创建该网站，但我最近继承了它并试图解决这个问题

非常感谢任何帮助，这里是 CSS

#html,body{  
  margin:0;   
  padding:0;  
  border:0;  
  height:100%;  
}

#body{  
 background:#ffffff;  
 min-width:965px;   
 text-align:center;   
 width: 600px;  
 font: Geneva, Arial, Helvetica, sans-serif;  
}

#.style7{  
  clear:both;  
  height:1px;  
  overflow:hidden;  
  line-height:1%;  
  font-size:0px;  
  margin-bottom:-1px;  
}




#fullheightcontainer{  
 margin-left:auto;  
 margin-right:auto;   
 text-align:left;   
 position:relative;   
 width:965px;     
 height:100%;  

}
#wrapper{  
 min-height:100%;   
 height:100%;  
background:#660000;  
 background-color: #660000;  
 background-repeat: repeat;  
}  

#wrapp\65 r{   
  height:auto;   
}

# html wrapper{
  height:100%;  
}  

#outer{  
 z-index:1;   
 position:relative;   
 margin-left:150px;   
 width:815px;   
 background:#FFFFFF;  
 height:100%;  
 background-color: #FFFFFF;  

}  
#left{  
  width:151px;   
  float:left;  
  display:inline;  
  position:relative;   
  margin-left:-150px;   
}  

padding: 20px;   
border: 0;   
margin: 0 0 0 240px  

*>html #left{width:150px;}   
#container-left{  
 width:150px;   
 color: #CCCCCC;  
}



* html #left{margin-right:-3px;}  

#center{  
  width:800px;   
  float:right;  
  display:inline;  
  margin-left:-1px;  
}  

#clearheadercenter{  
 height:125px;   
 overflow:hidden;  
}  

#clearfootercenter{  
  height:50px;   
  overflow:hidden;  
}


#footer{  
 z-index:1;  
 position:relative;  
 clear: both;  
 width:965px;   
 height:50px;   
 overflow:hidden;  
 margin-top:-50px;   
 background-color: #660000;  
}  

#subfooter1{  
 background:#FFFFCC;  
 text-align:left;  
 margin-left:150px;   
 height:50px;   
}

#header{  
 z-index:1;   
 position:absolute;  
 top:0px;  
 width:815px;   
 margin-left:150px;  
 height:100px;   
 overflow:hidden;  
 background-color: #660000;  
}

#subheader1{  
  background:#FFFFCC;   
  text-align:center;  
  height:70px;   
}  

#gfx_bg_middle{  
 top:0px;  
 position:absolute;  
 height:100%;  
 overflow:hidden;  
 width:815px;   
 margin-left:150px;   
 background:#FFFFFF;   
}

# html #gfx_bg_middle{  
  display:none;   
}

#floatingnav {  
 margin: 5px 10px 5px 5px;  
 padding: 0px 5px 5px;  
 float: right;  
 font: .75em/1.35em Geneva, Arial, Helvetica, sans-serif;  
 height: 600px;  
 width: 300px;  
}

#floatingnav a {  
color: #630;  
}

#floatingnav ul {  
margin-top: -5;  
}

#.floatright  
{
float: right;  
margin: 0 0 10px 10px;  
border: 1px solid #666;  
padding: 2px;
}

#outer{
 word-wrap:break-word;
}


#table.s1 {
 border-width: medium;
 border-spacing: 2px;
 border-style: none;
 border-color: rgb(85, 0, 0);
 border-collapse: collapse;
 background-color: white;
}
#table.s1 th {
 border-width: medium;
 padding: 2px;
 border-style: groove;
 border-color: red;
 background-color: white;
 -moz-border-radius: 0px 0px 0px 0px;
}
#table.s1 td {
 border-width: medium;
 padding: 2px;
 border-style: groove;
 border-color: #660000;
 background-color: #FFFFFF;
 -moz-border-radius: 0px 0px 0px 0px;
}

#a:link {
 color: #000066;
}
#a:visited {
 color: #000066;
}

#p.sample {
 font-family: serif;  
 font-style: normal;  
 font-variant: normal;  
 font-weight: normal;  
 font-size: medium;  
 line-height: 100%;  
 word-spacing: normal;  
 letter-spacing: normal;  
 text-decoration: none;  
 text-transform: none;  
 text-align: left;  
 text-indent: 0ex;  
}

Answer 1

我会重新考虑您创建列的方式。使用内部内容将主 div 向下推。看到这个example。

Answer 2

您是否在 Firefox 浏览器中使用 Firebug？使用 Firebug 我可以看到你的列结构都搞砸了。您应该考虑更简单地重建它们。

关于颜色被切掉，这与你的设置有关：

html, body { height: 100% }

在这种情况下，100% 仅覆盖可见的屏幕高度，而不是 100% 的内容。