div max-height 使用javascript动态设置

Question

我有一个使用母版页和内容页的 Web 应用程序（参见附图）。我需要根据浏览器窗口大小动态设置内容页面中一个 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();
    });
});