div max-height使用javascript动态设置

Question

我有一个使用母版页和内容页面的网络应用程序（参见附图）。我需要在内容页面中根据浏览器窗口大小动态设置一个div的最大宽度（这样整个应用程序就会停留在页面上，而不会滚动）。我只使用html和CSS找不到sloution（或无法复制结果）。所以我想用javascript来做。但问题是，我从来没有使用它，所以我真的不知道如何做到这一点。如果有人花了几分钟写出能够做到的功能，我真的很高兴。在我看来，我应该在页眉的下边缘和页脚的上边缘之间取高度差，并减去搜索栏和按钮栏的高度值。

编辑： 感谢maxedison提供该代码。但是，我该如何使用它？ ：D我是一个总菜鸟。我有一个问题，因为我使用母版页和内容页。我在哪里放这个代码？

编辑2 - 答案：

我进一步研究了如何使用jQuery，并在这里搜索了一些，我找到了一个解决方案。下次我开始开发一个应用程序时，我会从底层开始使用jQuery ......它只是简化了一些事情。 :)

所以对于解决方案：它与maxedison建议的类似，但我更改了它，我用CSS设置了高度，我只是添加了一个固定值来从window.height中扣除。

<script type='text/javascript'>
    $(function () {
        $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });

        $(window).resize(function () {
            $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
        });
    });
</script>

Answer 1

使用jQuery，它看起来像：

function resetHeight(){
    var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight();
    $('.content').height(newHeight);
}

$(function(){
    newHeight();

    $(window).resize(function(){
        resetHeight();
    });
});