2011-04-07 47 views
1

我試圖讓下面的代碼沒有硬編碼到應用程序中的670px工作,自動與非像素高度:如何使用溢出:在IE7

 <tr> 
      <td height="100%"> 
       <div id="navigation" class="navigation"> 
        <jsp:include page="menu.jsp" flush="true"/> 
       </div> 
      </td> 
      <td> 
       <div style="height:670px; overflow: auto; width:100%;"> 
        <jsp:include page='dynamicContent.jsp' flush="true"/> 
       </div> 
       <div> 
        <center><jsp:include page="footer.jsp" flush="true" /></center> 
       </div> 
      </td> 
     </tr> 

它使得罰款在IE7窗口前調整大小 - 內容窗格以頁腳底部以上固定高度滾動頁腳。

但是,當我使窗口變小時,這會停止工作(出於顯而易見的原因),因爲我已將頁面的HTML設置爲使用overflow:hidden。

不幸的是,使用「height:75%」似乎不符合IE7中的溢出。

有沒有人有任何想法我可能會假冒這對於IE7(它需要與IE7兼容項目要求的原因)?不幸的是,這段代碼非常嵌入,所以使用CSS定位而不是表格也可能比我們在下一個版本之前能夠處理的工作多得多。

+6

你能不能給我們一個[的jsfiddle(http://jsfiddle.net)與行爲的一個例子?從這個代碼本身來看,調整大小時不會出現任何錯誤。 – Khez 2011-04-10 18:07:00

+0

如果你想實現這樣的事情,你需要擺脫表格。 – 2011-04-15 20:29:37

回答

1

擺脫overlow: autooverlow: hidden和固定高度。相反給你的頁腳一個固定的位置,併爲頁腳的高度添加一個底部邊距。

body 
{ 
    margin-bottom: 100px; 
} 
.footer 
{ 
    position: fixed; 
    bottom: 0; 
    height: 90px; 
    padding-top: 10px; 
    background-color: #fff; 
} 

確保爲頁腳設置背景,否則頁面內容可以顯示。

這裏的工作活生生的例子:http://jsfiddle.net/ADpMs/