个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
我基本上需要实现的是让一个元素(div、span、table 等)占用其父级高度的 100%，并在其内容更高时显示滚动条。
问题是，在 height:100%; 下只有 chrome 和 IE 可以正常工作溢出:自动；。标准中的 Firefox、Opera 和 IE(任何 IE 7+，任何“标准”)只是忽略溢出并将 html 元素拉伸(stretch)到父大小以下。如果我设置固定高度它可以工作，但我无法在渲染前确定可用高度，有多个可能的值。
简化示例(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 及以下版本处理不同。
更新:大约有十个不同高度的页脚，理想情况下解决方案不应依赖于固定的页脚高度。
最佳答案
给你:
问题是 height: 100%; 将填充下一个定义的容器。无论出于何种原因，表都不被视为用于该目的的有效容器。因此，我们需要做的是利用表格布局的一些古怪之处。
position: absolute;
top:5px; left:5px;
right: 5px;
bottom: 40px;
overflow: auto;
border: 1px solid green;
background-color: #eee;
不需要在 td 上进行相对定位。不要问我为什么，也许有人比我更有见识。
无论如何，我们可以强制它扩展以填充一定量的空间，同时仍然允许:
真的希望这对您有所帮助；如果没有，我会非常乐意再试一次。
更新
你说 javascript 不是你想要的方式，但这里有一个使用 jQuery 的简短解决方案，它实际上可以解决问题:
$('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。很简单，对吧？
好吧，没那么快。 Div 并不意味着受表格单元格的限制，至少不理想。我们已经在 td 中有一些东西可以作为一个逻辑的、独立的容器，而 div 并不关心 td 是什么高度是指它是否已经有大量内容溢出其边界。当我们去查询那个 td 的高度时，无论它实际上 是什么，它都会报告它比它包含的元素大。所以，如果你在注释掉我们清空 div 的行后查看 fiddle ，你会看到 td 错误地报告自己接近 900 像素高.
那我们该怎么办？
好吧，我们把那些内容从 div 中拿走。现在它只是一个外壳，在任何情况下都会比它的容器小。这意味着 td 不会在我们查询时
撒谎
误报其大小，因为它肯定包含其子项。
一旦我们从 TD 得到真相，我们就告诉 div 它的父级报告的大小是它需要的大小，并将它的内容还给它。
瞧。您现在有一个 div 实际上尊重其父元素。如果只有真正的 child 那么容易就好了。
关于html - 高度为 100% 且溢出的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15257467/
24
4
0
我有一个 div(蓝色框)，它在父元素(红色框)内的页面上绝对定位，我需要将 overflow-y 设置为隐藏，以便它强制 Y 轴上的溢出内容切掉了，但我希望任何溢出-x 的内容都可见。 HTML:
请参阅以下帖子以获取突出显示我的问题和可能的解决方案的图片: CSS overflow-y:visible, overflow-x:scroll 但是，当您实际移动滚动条时，此策略会中断。在建议的实现
我在搜索中看到过几个类似的问题，但要么没有正确回答问题，要么没有给出答案。所以，我再问一次。 .parent { overflow-y:scroll; overflow-x:visible; wid
我读过这个CSS overflow-x hidden and overflow-y visible (以及很多其他帖子)但我无法在我的具体情况下使用它。 我正在使用 slick-slider并想添加下
我有以下 Spark 作业，试图将所有内容保留在内存中: val myOutRDD = myInRDD.flatMap { fp => val tuple2List: ListBuffer[(St
我有疑问 两个16位的值加上最大值，16位机会不会溢出？ 我会详细说明 unsigned short a; unsigned short b; unsigned long c; c=(unsigne
我有这个 HTML 和 CSS，但“溢出:隐藏”标签在 Firefox 中不起作用。这让我感到难过...有人知道为什么它不起作用吗？是因为A标签不支持overflow标签吗？ #page_sideba
我正在开发一个程序，用于在 C++ 中分解非常大的数字(20 位或更多)，并且正在使用 GMP 来处理溢出问题。我的程序对于大约 10 位或更少的数字运行良好，但是当我向它抛出一个 15 位数字时，它
我创建了一个 Canvas ，并在其中放置了一个StackPanel。 StackPanel是水平的，它接受缩略图图像的列表。 Canvas 具有固定的大小。当我放置的缩略图多于Canvas宽度不能容
当 g_array_append_val() 时会发生什么或 GLib 中的其他附加/前置函数之一，使 GArray 的长度大于 guint (unsigned int) 所能容纳的长度？ 文档对此没
overflow-x:hidden 和 overflow:hidden; 有什么区别？ 我所知道的是overflow-x:hidden;禁用水平滚动，但当我使用它时，它不仅仅适用于 Firefox，所
我们正在运行 Solr 来索引大量数据，但遇到了一个非常有趣的问题，我无法在任何地方找到任何帮助。 似乎 Solr 使用带符号的 32 位整数来计算索引中当前的文档数。我们刚刚达到了这个数字，我们的
这是我的查询: 从相似性中选择 COUNT(*)，其中 T1Similarity = 0 或 T2Similarity = 0 结果如下: Msg 8115, Level 16, State 2, L
int main(void) { char x1 = 0x81; char x2 = 0x1; int a, b; a = x1
我有一个 div，其中的内容通过查询的 append() 定期附加到它。随着内容越来越长，最终会溢出div。我不希望在溢出时出现滚动条，但仍然让内容向上滚动以显示下面的新内容。 这可能吗？当我使用 o
我为 UITextField 创建了一个简单的子类，它按预期工作。我遇到的唯一问题是当文本值变得太大时，它会溢出到清除按钮中。 我似乎无法找到如何仅更改文本的右侧以具有一些填充而不与清除按钮相交的方法
我想要一个包括下拉菜单的粘性导航栏。但是，当我将鼠标悬停在它上面时，下拉菜单没有显示。 如果我删除 overflow: hidden;在无序列表中，当我向下滚动时，导航栏设法保持在顶部，但是导航栏是不
我正在研究一些按钮。我想要一个翻转状态，我在一个 div 的图像中有这个，溢出:隐藏以隐藏不活动的状态。它有时有效，但有时看起来像这样: 最奇怪的是，当我尝试使用 Chrome Web Inspect
基本上，我正在尝试创建一个六边形形状，它内部有一个圆圈，圆圈的多余部分应该被隐藏。演示:https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=110
这似乎是一个相当常见且不那么奇特的用例，但我以前没有遇到过。我设置了一支笔，但无法在那里复制它，我正在努力找出原因。 Demo Pen 左侧边栏有一个用于元素列表的自定义滚动窗口，但是虽然设置 ove
我是一名优秀的程序员,十分优秀！