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溢出大小 - 拍摄最大可用空间

回答

相关问题