[相容性問題] 遇到版面設計問題~!!! 無法為網站定位~!!!

Question

網址: http://119.246.142.123:81先說說我遇到的問題~~~
我剛剛開始設計一個新網站時出現排版問題,
在IE,Opera,FireFox 中,
#main 無法出現 Scroll Bar。詳細
使用者進入網站後,
點擊 #header 的分類按鈕後,
#main 會自動滾動到合適位置。
另外, 我想網站的高度跟隨瀏覽器的像數而變化。包著 #main 的 td height 是 100%,
也試過用 absolute 和 relative 都是不出現滾動條。
#main 的 position 是 relative,
如果 #main 設定成 absolute 後,
在 IE,FF,Opera 中會消失。如果 td 用 px 來定位就沒有出現相容性問題,
不過頁面高度會定死了,
就無法做到我想要的效果,
頁面的高度跟隨瀏覽器的像數而變化。下圖是排版詳情IE, FireFox, Opera 的 #main 無法出現滾動條
Chrome, Safari 正常顯示
架構圖片
CSS#body-div{
   width: 1200px;
   height: 100%;
   margin:0 auto;
   overflow: visible;
   position: relative;
}
#body_table tr{
   padding:0;
   margin:0;
}
#body_table{
   position: relative;
   top: 0px;
   left: 0px;
   height: 100%;
   overflow: hidden;
}
#left_td,#main_td,#right_td{
   vertical-align:top;
}
#left_td{
   background-position:35px;
   width: 200px;
   background: url(/Rs/img/v1/leftbg.jpg) righttop repeat-y;
}
#main_td{
   width: 800px;
   overflow:hidden;
   background: #FFF87A url('/Rs/IMG/v1/mainbg.jpg')left center repeat;
}
#right_td{
   width: 200px;
}
#main{
   position: relative;
   width: 800px;
   top: -1px;
   height: 100%;
   overflow: auto;
}
#header{
   background: url(/Rs/IMG/v1/header.jpg) topcenter no-repeat;
   position: relative;
   width: 800px;
   height: 170px;
   top: 0px;
   z-index: 50;
   padding-top:1px;
}
#footer{
   position: relative;
   width: 1200px;
   color: #CC4400;
   padding-top:0px;
   margin: -5px auto 0 auto;
   height: 55px;
   font-size: small;
   text-align: center;
   background-color:#00185C;
   z-index: 50;
   background:url(/Rs/img/v1/footer.png) righttop repeat-x;
}

Answer 1

IE6IE7Firefox各不相同#example
{  
height:100px;/*Firefox*/  
_height:200px;/*IE6*/  
*+height:300px;/*IE7*/  
}  
或：  
#example
{  
height:100px;/*Firefox*/  
*height:300px;/*IE7*/  
_height:200px;/*IE6*/  
}  
建议阅读：http://developer.51cto.com/art/201008/222376.htm

Answer 2

可是做不到頁面高度跟隨瀏覽器的像數而變化。 ><"
無論如何~ 謝謝你唷~!!!