5

我基本上需要实现的是让一个元素（div、span、table 等）消耗其父高度的 100% 并在其内容更高时显示滚动。

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

简化示例（为此使用 jsFiddle）：

<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及以下处理方式不同。

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

4

3 回答 3

4

干得好：

更新了小提琴。

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

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

不需要在td. 不要问我为什么，也许有人比我更博学。

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

  1. 可见的页脚。
  2. 存在的填充（即使它在技术上不是填充。）
  3. 这个解决方案可以在跨浏览器环境中工作。

真的希望这会有所帮助；如果没有，我很乐意再试一次。

更新

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

更新小提琴

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

为什么这样有效：

需要其父级在 100% 高度起作用之前具有定义的div高度，但这不是您的选择，因为您已经声明这都是动态内容。没问题。我们只需要 jQuery 将计算出的高度推送到div浏览器已经渲染后的高度。很简单，对吧？

嗯，没那么快。Div 并不意味着受表格单元格的限制，至少不理想。我们已经有一些东西可以在 中用作逻辑的、独立的容器td，并且如果它已经有大量内容溢出边界，那么它div并不关心它的高度是多少。td当我们去查询 that 的高度时td，不管它实际上是什么，它都会报告它比它包含的元素大。div因此，如果您在注释掉我们清空td.

那么我们该怎么办？

好吧，我们从div. 现在它只是一个外壳，在任何情况下它都会比它的容器小。这意味着当我们查询它时，它td不会谎报它的大小，因为它自信地包含它的孩子。

一旦我们从 TD 那里得到真相，我们就会告诉div它它的父级报告的大小是它需要的大小，并将其内容返回给它。

瞧。你现在有一个div真正尊重它的父母的人。如果只有真正的孩子那么容易。

于 2013-03-08T21:57:58.410 回答
2

HTML表格的基本行为

这是一个演示，展示了小内容和超大内容如何影响表格的宽度和高度。表格旁边有灰色的标尺，显示表格的预期尺寸。独立版本的演示。

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

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

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

对于宽度，所有浏览器的结果都与 #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 { }

这是问题中发布的演示的更新版本，使用上面列出的更改（在：IE7/8/9/10 标准和 Quirks 模式、Firefox、Chrome、Safari、Opera 中测试）。如果在旧版本的 IE 中运行 JSFiddle 有困难，请尝试这个独立版本的演示。

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

于 2013-03-10T17:29:09.100 回答
0

我有一个解决方法。tbody标签是在 Firefox 中自动添加的，这会导致问题。添加height:100%到您的td和height:90%您的tbody. 该tbody标签从未存在，因此您应该使用 css 添加它。

table tbody{height:90%}

现场演示

于 2013-03-06T20:47:00.047 回答