Question

我基本上需要实现的是拥有一个元素（div，span，table，等等）来消耗100％的'父高度，如果内容更高则显示滚动。

问题是，只有奇怪的铬和IE可以与height:100%; overflow: auto;一起正常工作。标准中的Firefox，Opera和IE（任何IE 7+，任何“标准”）都会忽略溢出并将html元素拉伸到父级大小以下。如果我设置固定高度它可以工作，但我无法确定渲染前的可用高度，有多个可能的值。

简化示例（jsFiddle for this）：

<body>
    <div id="parent">
        <table id='container'>
            <tr>
                <td>
                    <div id='element-in-question'>
                        <!--Content long enough to stretch the div-->
                    </div>
                </td>
            </tr>
            <tr>
            <td id='footer-cell'>
                <div id='footer'>I'm footer<div>
            </td>
            </tr>
        </table>
    </div>
</body>

的CSS：

#parent { height:500px; width:500px; position:absolute; }
#container { height: 100%; width:100%; }
#element-in-question { height:100%; width:100%; overflow: auto; }
#footer-cell { height:30px;}
#footer { height: 30px; }

在真正的应用程序中，所有这些东西都在iframe中运行，表用于呈现页眉和页脚等等。请不要建议停止使用表格，它是100多个需要注意的地方的遗留应用程序。仅CSS解决方案将是理想的。

还有一点：它应该适用于Chrome，IE10标准模式。不支持FF，Opera和Safari，IE9及以下版本的处理方式不同。

更新：大约有十个不同高度的页脚，理想情况下解决方案不应该依赖于固定的页脚高度。

Answer 1

你走了：

Updated fiddle.

问题是height: 100%;将填充下一个定义的容器。无论出于何种原因，表格都不被视为有效容器。所以我们需要做的是利用表格布局的一些怪癖。

position: absolute;
top:5px; left:5px;
right: 5px;
bottom: 40px;
overflow: auto;
border: 1px solid green;
background-color: #eee;

td无需相对定位。不要问我为什么，或许比我能说的更有知识的人。

无论如何，我们可以强制它扩展以填充一定数量的空间，同时仍允许：

页脚可见。
要存在的填充（即使它不是技术上填充。）
此解决方案适用于跨浏览器环境。

真的希望这会有所帮助;如果它没有，我会非常乐意再给它一次。

<强>更新

你说javascript并不是你想要的，但这是一个使用jQuery的简短解决方案，它实际上可以解决问题：

<强> Updated Fiddle

$('td > div').each(function() {
    var t = $(this);
    var text = t.html();
    t.hide();
    t.height(t.parent().height());
    t.show(text);
});

为什么会这样：

div需要其父级在100％高度工作之前具有已定义的高度，但这不适合您，因为您已经说过这是所有动态内容。没问题。我们只需要jQuery在浏览器渲染后将计算出的高度推送到div。很简单，对吧？

td

div

td

div

td

那我们该怎么办？

好吧，我们将这些内容从div中移除。现在它只是一个外壳，在任何情况下它都会比它的容器小。这意味着当我们查询时，td没有谎言误报了它的大小，因为它自信地包含了它的孩子。

一旦我们从TD得到了真相，我们就告诉div其父级报告的大小是它所需的大小，并将其回馈给它。

瞧。您现在有div 实际上尊重其父。如果只有真正的孩子那么容易。

Answer 2

HTML表格的基本行为

Here's a demo显示小型和超大型内容如何影响表格的宽度和高度。桌子旁边有灰色标尺，显示了桌子的预期尺寸。 Standalone version of the demo

在表格单元格中滚动超大的可变大小内容似乎在某种程度上垂直工作，而不是水平工作。

对于身高，不同浏览器有3种不同的结果：

表格的整体高度是正确的。这适用于Chrome和Safari（Webkit浏览器）。
内容行占据整个表格的预期高度，页脚行为表格增加了额外的高度，导致表格比预期的高一点。这种情况发生在Firefox和Opera以及标准模式下的IE7 / 8/9/10中（尽管在IE中，页脚单元格甚至高于页脚内容的高度，这为表格增加了显着的额外高度。）
内容行的整个高度显示时没有滚动条，导致表格比预期的要高得多。在Quirks模式下，IE7 / 8/9/10会出现这种情况。

对于宽度，结果与所有浏览器的＃3相当（全部内容宽度始终显示为没有滚动条）。

CSS妥协

最接近似乎可能的CSS解决方案是为#element-in-question设置固定高度（尽管让它保持可滚动状态），并允许页脚高度变化。桌子的整体尺寸会因高度不同而有所不同。如果页脚的高度差很小，或者整个表总是具有相同的高度并不重要，那么这可能是一个合理的折衷。

问题中发布的CSS看起来如下所示（给予#element-in-question任何高度被确定为最佳，当与平均或最常见的页脚高度相结合时）。

#parent { width:500px; position:absolute; }
#container { width:100%; }
#element-in-question { height:450px; width:100%; overflow: auto; }
#footer-cell { }
#footer { }

这是问题中发布的updated version of the demo，使用上面列出的更改（在IE7 / 8/9/10标准和Quirks模式，Firefox，Chrome，Safari，Opera中测试）。如果在旧版本的IE中运行JSFiddle时遇到困难，请尝试使用standalone version of the demo。

网站设计似乎超出了HTML表格的范围。除非可以对设计施加某些约束（例如此处描述的约束），否则看起来这将需要JavaScript或jQuery。

Answer 3

我有一个解决方法。tbody标记会自动添加到firefox中并导致问题。将height:100%添加到td，将height:90%添加到tbody。 tbody标记从未存在过，因此您应该使用css添加它。

table tbody{height:90%}

Live Demo

高度为100％且溢出的元素

3 个答案: