0

我有这样的文件：

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

是否可以？

这是我想要得到的结果： 在此处输入图像描述 所以当我调整浏览器滚动条的大小时，滚动条将位于右侧和底部，类似于 iframe。

4

2 回答 2

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
}

这应该可以正常工作。

于 2012-05-14T14:12:50.090 回答
0

是的，这是可能的！

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

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

或保持宽度独立于边距和填充的边界框解决方案（因此我们可以在 width: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-14T14:09:12.327 回答