Question

我有这样的文件：

<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％且剩余浏览器高度高度的div。

有可能吗？

这是我想得到的结果： enter image description here 因此，当我调整浏览器时，滚动条将位于右侧和底部，类似于iframe。

Answer 1

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

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
}

这应该可以正常工作。

Answer 2

是的，这是可能的！

尝试位置：绝对填满所有方面

  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 */
  }

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

2 个答案: