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

Question

我有一个三行表。我有 1 个主要的#container div（高度 100%），里面是一个有 3 行的表。第一行和最后一行具有固定大小的内容。第二行是一个高度为 100% 的 #content div 和溢出：自动。 （实际上表格有更多的行，页面有更多的 div，但为了清楚起见，我为这个问题把它缩小了）。

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

我一定是做错了什么，或者可能误解了某些东西:) 有什么想法吗？也许那里有 jquery/javascript 可以监视页面并在加载/调整浏览器大小时缩小特定的 div？

编辑：我刚刚创建了一个小例子：http://wierdaonline.com/softest.html

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

Answer 1

在不使用表格和使用固定位置的情况下创建固定页眉和页脚要容易得多：

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

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

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

Answer 2

在 div 中设置overflow: scroll。你不应该为此需要 Javascript。

Answer 3

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

Answer 4

编辑：这些更改应该适用于高度，如果您愿意，可以对宽度进行类似的操作。

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);}
};

内容 div 的表格：

<td valign='top' id='content2'>

这样的东西有用吗？

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;
};

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

Answer 5

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

CSS

#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;
}

HTML

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

如果您有时间切换 HTML，最好还是not use tables。