相关疑难解决方法(0)

我正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度.

该页面有一个标题,其中包含徽标和帐户信息.这可以是任意高度.我希望内容div将页面的其余部分填充到底部.

我有标题div和内容div.目前我正在使用表格进行布局,如下所示:

CSS和HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

页面的整个高度都已填满,无需滚动.

对于内容div中的任何内容,设置top: 0;将把它放在标题下面.有时内容将是一个真实的桌子,其高度设置为100%.放在header里面content不会允许这个工作.

有没有办法在不使用的情况下达到相同的效果table？

更新:

内容中的元素div也将高度设置为百分比.因此,100%内部的东西div将填充到底部.两个元素也是50%.

更新2:

例如,如果标题占据屏幕高度的20%,则内部指定为50%的表#content将占用屏幕空间的40%.到目前为止,将整个事物包装在表中是唯一有效的方法.

我正在尝试调整页面加载和窗口大小调整div的大小.下面放置代码</body>,它在页面加载时工作正常,但在窗口大小调整时没有任何作用.我使用警报测试了resize函数,该调整在调整大小时触发,但高度保持不变.

<script type='text/javascript'>
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
</script>

更新:经过长时间休息后,我发现了导致问题的原因.我正在使用jquery脚本在正在调整大小的同一div上添加样式化滚动条.当我评论出来时,一切都很好.我已经在与调整大小相同的函数中移动了滚动条初始化,并尝试了我能想到的任何变化..仍然无法使其工作.

(#main-content div也有.scroll-pane类)

<script type='text/javascript'>
$(function(){
    $('#main-content').css({'height':(($(window).height())-361)+'px'});
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
    });
});
</script>