Css 具有溢出大小的DIV-占用最大可用空间_Css_Html

Css 具有溢出大小的DIV-占用最大可用空间

css html

Css 具有溢出大小的DIV-占用最大可用空间,css,html,Css,Html,我有这样一份文件： <html> <head> <style> div.result { height: 500px; overflow: auto; width: 900px; } </style> <div class="options"></div> <div class="result"> <table>  </ta

我有这样一份文件：

<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>


分区结果{
高度：500px；
溢出：自动；
宽度：900px；
}

这给了我一个固定大小的滚动条框。我希望我的结果框在浏览器中保留剩余的可用大小，并且仍然有滚动条（如果有必要的话）

因此，我的选项div将保持在顶部，而下面将是另一个div，其宽度为100%，高度为剩余浏览器高度

可能吗

这是我希望得到的结果：因此，当我调整浏览器大小时，滚动条将位于右侧和底部，类似于iframe。

是的，这是可能的

尝试位置：绝对，填充到所有边

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

或者边框框解决方案，使宽度独立于边距和填充（因此我们可以在宽度：100%仍然正确应用时使用边距）

您可以为选项和结果元素设置绝对大小和位置：

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
}

这应该很好。

这很好：）但是可以将固定标题添加到我的表中吗？我在updatepanel中使用asp GridView，所以我更喜欢简单的css解决方案。我试图通过复制表格标题并将其放置在我的表格上方，然后添加位置：fixed，但这不正确。你是说图像中表格上方的黑色/渐变标题栏？是的，这只是样式化的标题。现在它是表的一部分，但我希望它保持在顶部，所以当我垂直滚动表时，它将保持在顶部，而当我水平滚动表时，它将移动。我尝试使用，但我的表不能有固定的列宽度：/您应该尝试使用绝对位置或固定位置，或者在web上搜索一些javascript/jquery解决方案，但我不能亲自告诉你怎么做(

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
}