使用javascript动态设置div max height

我有一个使用母版页和内容页的web应用程序（见附图）。我需要根据浏览器窗口的大小动态设置内容页面中一个div的最大宽度（这样整个应用程序就不会滚动，而是停留在页面上）。我无法仅使用html和CSS找到解决方案（或无法复制结果）。所以我想用javascript来做。但问题是，我从来没有用过它，所以我真的不知道怎么做。我真的很感激有人花了几分钟的时间来写这个函数。在我看来，我应该取页眉下边缘和页脚上边缘之间的高度差，然后减去搜索栏和按钮栏的高度值

编辑： 感谢maxedison提供的代码。但是，我该如何使用它呢我是个彻头彻尾的傻瓜。我有一个问题，因为我使用母版页和内容页。我应该把代码放在哪里

编辑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>

$（函数（）{
$（'.myStyle'）.css（{'height'：（$（window.height（））-350）+'px'}）；
$（窗口）。调整大小（函数（）{
$（'.myStyle'）.css（{'height'：（$（window.height（））-350）+'px'}）；
});
});

使用jQuery，它看起来像：

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

$(function(){
    newHeight();

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

---

@李斯特先生-我不确定这在CSS中是否可行。我还寻求了一个纯CSS解决方案，以使div扩展到适合可用的垂直高度，但没有成功。@Lister先生-我尝试了我能找到的任何CSS解决方案…没有一个能满足我的要求。所以我想试试javascript或jQuery。太好了，非常感谢！现在我来学习一下，我应该把这个代码放在哪里：D我会第一次使用它，所以祈祷好运，我能让它工作。：）我应该把它放在我的内容页还是母版页？再次感谢。哦，我忘了提了。我使用.NET 2，因为我需要考虑一些限制。这是可行的，还是适用于.net上的较新版本？@user1080533.net版本与jQuery（即javascript）无关，因为它是客户端。你应该把这段代码放在你的

标记中，放在

标记中。@Nate谢谢，我用谷歌搜索了它，并阅读了一些jQuery的教程，我设法得到了我想要的。我用答案更新了我的问题。：）