DIV溢出大小 - 拍攝最大可用空間

我有一個文件是這樣的：DIV溢出大小 - 拍攝最大可用空間

<html> 
<head> 
<style> 
div.result { 
height: 500px; 
overflow: auto; 
width: 900px; 
} 
</style> 
<div class="options"></div> 
<div class="result"> 
<table> 
<!--here I have large table--> 
</table> 
</div>

這讓我的滾動條固定大小的盒子。我想我的結果框在瀏覽器中採取其餘的可用大小，並仍然有滾動條（如果有必要）

因此，我的選項div將保持在上面和下面將是另一個具有100％的寬度和剩餘瀏覽器高度的高度。

可能嗎？

這是結果，我想獲得： enter image description here 所以，當我調整瀏覽器滾動條會在右邊和底部，類似iframe中。

來源

2012-05-14 Misiu

您可以設置絕對大小和你的期權頭寸，並導致元素：

div.options { 
    width: 100%; 
    height: 300px; // Set height of the options box 
    padding: 0; 
} 

div.result { 
    position: absolute; 
    top: 300px; // Same as options box 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: scroll; // Could be auto too 
}

這應該很好。

來源

2012-05-14 14:12:50

這工作得很好:)但有可能將固定標題添加到我的表？我在updatepanel內部使用asp GridView，所以我更喜歡簡單的css解決方案。我試圖通過複製表頭並將其放在我的表格上方，然後添加位置：固定，但這不正確。 – Misiu

你的意思是圖像上方的黑色/漸變標題欄？ –

是的，這只是風格的標題。現在它是桌子的一部分，但我希望它保持在頂部，所以當我垂直滾動桌子時，它將保持在頂部，當我滾動水平時它會移動。 – Misiu

是的，這是可能的！

嘗試的位置是：絕對的，填補了各方意見

div.result { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    left: 0px; 
    overflow: auto; 
    }

或保持寬度獨立邊距和補（所以我們可以使用邊距，而寬度的邊框現成的解決方案：100％仍然適用正確）

div.result { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
    margin-top: 100px; /* Or whatever you need */ 
    }

來源

2012-05-14 14:09:12

DIV溢出大小 - 拍攝最大可用空間

回答

相關問題