Проблема макета CSS в Firefox с заполнением пространства между концом левого столбца и нижним колонтитулом

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

Вы используете Firebug в своем браузере Firefox? Используя Firebug, я вижу, что ваша структура столбцов испорчена. Вам следует подумать о том, чтобы восстановить их более просто.

Что касается цвета, на который нарезают, это связано с вашей настройкой:

html, body { height: 100% }

В этом случае 100% покрывает только видимую высоту экрана, а не 100% вашего контента.

Answer 2

Я бы переосмыслил способ создания ваших столбцов. Используйте внутренний контент, чтобы протолкнуть основной div вниз. Смотрите этот пример .