Javascript 如何在不显示浏览器垂直滚动条的情况下自动缩小100%的div？

我有一张三排的桌子。我有一个主容器分区（高度100%），里面是一张有3行的桌子。第一行和最后一行具有固定大小的内容。第二行是#content div，高度为100%，溢出：auto。（实际上，表中有更多的行，页面中有更多的div，但为了清晰起见，我缩小了这个问题的比例）

如果#content中的内容超过了合适的范围，则该div的内容旁边应显示一个垂直滚动条。但是，浏览器窗口本身会显示一个垂直滚动条。但是，当我将#content div设置为固定大小时，垂直滚动条确实出现在正确的位置

我一定是做错了什么，或者可能误解了什么：）有什么想法吗？也许有jquery/javascript可以监控页面，在加载/调整浏览器大小时，可以缩小特定的div

编辑：我刚刚创建了一个小示例：

---

在理想情况下，整个内容（表格）应该始终在浏览器窗口中可见，除了在#content div中之外没有任何窗口滚动条。

在div中设置

overflow:scroll

。这不需要Javascript。

编辑：这些更改应该适用于高度，如果你愿意，同样的事情也可以用宽度来做

javascript:

window.onresize = function() {
    var tehdiv = document.getElementById('content2');
    if($(window).height() < 100) { tehdiv.height = 50; }
    else if($(window).height() > 2000) { tehdiv.height = '100%'; }
    else { tehdiv.height = ($(window).height()/2);}
};

---

这将使它的规模扩大到一半的窗口大小，只要它可以更大的whan 50。您还可以将最小值更改为最大值，并使其在该点执行tehdiv.height=100%。

容器100%是页面高度的100%，可以大于窗口高度。将html和正文高度设置为100%（=窗口的100%）可能会有所帮助，具体取决于您试图实现的目标。

不使用表格和固定位置，创建固定页眉和页脚要容易得多：

#header
{
    position: fixed;
    top: 0;
    height: 20px;
}

#middle
{
    position: fixed;
    top: 20px;
    bottom: 20px;
    overflow: auto;
}

#footer
{
    position: fixed;
    bottom: 0;
    height: 20px;
}

---

既然你别无选择，只能使用表格，我修改了HTML，但实际上保留了与我在上面的评论中发布的演示相同的CSS，-我发现的唯一问题是在IE7中，页眉和页脚表格单元格没有100%跨越：

CSS

HTML

标题
页脚
内容在这里

---

如果您开始切换HTML，最好还是这样做。

No，它总是显示滚动条，同时仍让内容超出浏览器窗口，从而也显示浏览器窗口滚动条。主（#maincontainer）内容应始终放在浏览器窗口内，因此如果浏览器太小，无法显示所有内容，则只有#content div应有滚动条。您是否有示例页面来说明此问题？如果我理解正确，你有一个100%高的div，然后在多个div里面，其中一个是100%高？这似乎不合情理。不幸的是，目前还没有一个例子。但您可以将其视为一个包含3行的表的页面。第一行有一个页眉（一行文本），第二行有一个高度为100%且包含大量内容的div，第三行有一行文本页脚。基本上，整个内容应该在浏览器窗口中始终可见，这样当您调整浏览器大小时，只有第二行（带有#content div）调整大小，第一行和第三行保持可见。就像一个手风琴，当你把它推入里面时，每个袋子都会放气，除了前面和后面。不幸的是，这个函数在我的页面上没有做任何事情。@Jason是的，我知道它编码不好。这本书并不意味着好，考虑到它有多小，甚至不容易阅读，只是一个他如何能做到这一点的想法。我假设询问者知道足够的js来重写代码，因为我不倾向于为他们编写人们的代码。请根据您的规格随意修改。@Jeroen W尝试制作小提琴和/或发布一些示例代码。这将使我们更容易帮助您。示例添加到主帖子中。使用一个新版本进行编辑，可以轻松地工作。您可能希望使用$（window）.height（）-（不管您的表的其余部分有多大）而不是除以2，以使表仍然填充屏幕。我只是尝试设置html，body{height:100%；}，但这没有任何区别。此外，您可能必须将表设置为100%高度，然后，第一行和最后一行的高度为1px，中间一行的高度为零。这将控制表。不幸的是，不使用表不是一个选项。我的应用程序目前基于表（表中有很多行和表）。我以前试过去掉所有的桌子，但到目前为止都没有成功。我想，摆脱桌子是一个长期的项目。难道没有办法让它与桌子和所有的东西一起工作吗？非常好的例子btw@fudgey。谢谢你的例子。它适用于表：）我尝试在自己的应用程序中使用许多嵌套的表和行来实现它，但没有成功。这似乎是可能的（你证明了这一点），但只是不与我的设置。我可能很快会再次尝试将其转换为无桌设置。我还不知道该怎么做，因为它以前失败得很惨。请确保您有

thead

、

tfoot

和

tbody

，并且

tfoot

在

tbody

之前。。。将ID添加到tr而不是td可能更好。我知道你的意思，但我有大量嵌套的表、行和div混杂在它们之间。我不知道每个元素的确切大小。（就像您对页眉/页脚所做的那样，并从content div中减去它）。我可以显示应用程序，但我不想在这里发布url。

window.onresize = function() {
    var minh = 50;
    var minw = 50;
    var tehh = (window.height/2);
    var tehw = (window.width/2);
    var tehdiv = document.getElementById('yourdiv');
    tehdiv.height = (tehh > minh)? tehh : minh;
    tehdiv.width = (tehw > minw)? tehw : minw;
};

#header
{
    position: fixed;
    top: 0;
    height: 20px;
}

#middle
{
    position: fixed;
    top: 20px;
    bottom: 20px;
    overflow: auto;
}

#footer
{
    position: fixed;
    bottom: 0;
    height: 20px;
}

#header, #footer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    border: #000 1px solid;
    margin: 5px;
}
#footer {
    top: auto;
    bottom: 0;
}
#content {
    position: absolute;
    top: 25px;
    left: 0;
    bottom: 25px;
    right: 0;
    overflow-y: auto;
    background: #ddd;
    margin: 5px;
}

<table id="page">
    <thead>
        <tr><td id="header">Header</td></tr>
    </thead>
    <tfoot>
        <tr><td id="footer">Footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td><div id="content">Content goes here</div></td></tr>
    </tbody>
</table>