javascript - 在窗口大小调整时调整 html 元素的大小

Question

几天前我发现了一个类似的问题，从那时起我一直在尝试实现其中一项建议，但没有成功。我有一个 ASPx 页面，而不是主页面，它有两个表，一个叠在另一个上面。我已经按照我想要的方式设置了顶部格式。但是，我想让底部适合窗口，或者更好的是，显示垂直滚动条。

我已将底部表格包装在带有溢出样式的 div 中:auto;在 CSS 文件中。然后我在页面中使用以下脚本来管理大小调整:

    $(function () {
        $('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });

        $(window).resize(function () {
            $('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });
        });
    });

我的 div 看起来像:

<div class="tblContent">

CSS 文件包含:

.tblContent 
{
    overflow-style: auto;
}

Answer 1

对于包含表格的底部 div(假设您希望它占屏幕的 50%。您显然可以调整它。):

overflow:auto;
height:50%;
width:100%;

对于表格本身:

width:100%;