如何在不顯示瀏覽器垂直滾動條的情況下自動縮小100％div？

Question

我有一個三行的表。我有一個主#container div（高度100％），裏面是一個3行的表格。第一行和最後一行具有固定大小的內容。在第二行是一個帶100％高度和溢出的#content div：auto。 （實際上表格有更多的行，頁面有更多的div，但爲了清晰起見，我對此問題進行了調整）。

如果#content中的內容比fit更多，則應在該div的內容旁邊顯示一個垂直滾動條。但是，垂直滾動條出現在瀏覽器窗口本身。但是，當我將#content div設置爲固定大小時，該垂直滾動條確實出現在正確的位置。

我一定在做錯事，或者可能會誤解某些事情:)任何想法？也許有jQuery/JavaScript那裏可以監視頁面，並加載/調整瀏覽器的大小，縮小特定的div？

編輯：我剛剛創建了一個小例子：http://wierdaonline.com/softest.html

在理想情況下，整個事情（表）應該總是在瀏覽器窗口中可見，沒有比其他＃內容的任何窗口滾動條DIV。

Answer 1

在div中設置overflow: scroll。這不應該需要Javascript。

Answer 2

編輯：這些改變應該適用於身高，如果你願意，也可以用寬度做類似的事情。

的javascript：

window.onresize = function() { 
    var tehdiv = document.getElementById('content2'); 
    if($(window).height() < 100) { tehdiv.height = 50; } 
    else if($(window).height() > 2000) { tehdiv.height = '100%'; } 
    else { tehdiv.height = ($(window).height()/2);} 
}; 

內容div的表：

<td valign='top' id='content2'> 

會是這樣的工作？

window.onresize = function() { 
    var minh = 50; 
    var minw = 50; 
    var tehh = (window.height/2); 
    var tehw = (window.width/2); 
    var tehdiv = document.getElementById('yourdiv'); 
    tehdiv.height = (tehh > minh)? tehh : minh; 
    tehdiv.width = (tehw > minw)? tehw : minw; 
}; 

這將使擴展到一半的窗口大小，只要它可以做大煥50.您也可以改變最小到最大，並使它在這一點上進行tehdiv.height = 100％。

Answer 3

#container 100％是頁面高度的100％，可以超過窗口高度。根據你想要達到的目標，將HTML和身高設置爲100％（=窗口的100％）可能會有所幫助。

Answer 4

這是很容易，而無需使用表和使用固定位置來創建一個固定的頁眉和頁腳：

#header 
{ 
    position: fixed; 
    top: 0; 
    height: 20px; 
} 

#middle 
{ 
    position: fixed; 
    top: 20px; 
    bottom: 20px; 
    overflow: auto; 
} 

#footer 
{ 
    position: fixed; 
    bottom: 0; 
    height: 20px; 
} 

Answer 5

嘛，因爲你沒有選擇，只能使用表，我修改了HTML，但實際上留下的CSS從我張貼在上面註釋的演示一樣，check it out here - 我發現唯一的問題是在IE7在頁眉和頁腳的表格單元格不會在去100％：

CSS

#header, #footer { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 20px; 
    border: #000 1px solid; 
    margin: 5px; 
} 
#footer { 
    top: auto; 
    bottom: 0; 
} 
#content { 
    position: absolute; 
    top: 25px; 
    left: 0; 
    bottom: 25px; 
    right: 0; 
    overflow-y: auto; 
    background: #ddd; 
    margin: 5px; 
} 

HTML

<table id="page"> 
    <thead> 
     <tr><td id="header">Header</td></tr> 
    </thead> 
    <tfoot> 
     <tr><td id="footer">Footer</td></tr> 
    </tfoot> 
    <tbody> 
     <tr><td><div id="content">Content goes here</div></td></tr> 
    </tbody> 
</table> 

它仍然是最好not use tables，如果你避開周圍切換HTML。