CSS：高度 - 填写 div 的其余部分？

Posted 2023-03-06

【中文标题】CSS：高度 - 填写 div 的其余部分？

【英文标题】：CSS: height- fill out rest of div?

【发布时间】：2011-03-25 14:08:45

【问题描述】：

我想知道这是否可以通过简单的 css 实现，或者我是否必须为此使用 javascript？

我的网站上有一个侧边栏。一个简单的 div#sidbar 它通常大约 1024px 高，但高度会因为它的内容而动态变化。

让我们想象一下下面的例子：

<div id="sidebar">
   <div class="widget"></div> //has a height of 100px
   <div class="widget"></div> //has a height of 100px
   <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar
</div>

我希望 div#rest 填充侧边栏的其余部分，直到它到达 div#sidebar 的底部。

纯css可以做到吗？

【参考方案1】：

试试

height: 100%;

或

height: auto;

【讨论】：

100% 将超出侧边栏的高度，因为已经有 2 个其他 div。

已经试过了！不起作用。如果我设置“100%”，则 div#rest 从整个页面获取 100%。所以这意味着它比实际的侧边栏本身要长得多。使用“auto”什么都不会发生。

我不是 100% 确定，但是当您设置“自动”时，您可能需要更改“位置”属性。我绝不是 CSS 专家，但我记得“自动”对于每种类型的位置都有不同的表现。

【参考方案2】：

您想要的是 100% - 200px 之类的东西，但 CSS 不支持此类表达式。 IE 有一个非标准的“表达式”功能，但是如果你想让你的页面在所有浏览器上工作，我看不到没有 JavaScript 的方法。或者，您可以让所有 divs 使用百分比高度，这样您就可以有 10%-10%-80% 之类的值。

更新：这是一个使用 JavaScript 的简单解决方案。每当侧边栏中的内容发生变化时，只需调用此函数即可：

function resize() 
  // 200 is the total height of the other 2 divs
  var height = document.getElementById('sidebar').offsetHeight - 200;
  document.getElementById('rest').style.height = height + 'px';
;

【讨论】：

你知道javascript方式吗？

小心闪烁。这对于创建嵌入阴影根本不起作用。

100% - 200px 可以使用 calc CSS 值。

不会height: 100%; margin-bottom: 200px; 这样做吗？

@RobW：或者更确切地说，will be possible 在桌面上当足够多的人停止使用 Windows XP（或足够多的 XP 用户切换到 Chrome 或 Firefox）时，因为 IE8 没有支持它，这是 XP 的最大 IE。 IE8 及以下版本目前占全球网络用户的约 30%（如果您不必支持中国，则大约为约 23%，但这仍然是潜在访问者的近四分之一）。这将是一个漫长的等待，特别是对于那些有权在 Windows 7 的 EOL 作为其批量许可的一部分之前使用 XP 的公司。 :-)

【参考方案3】：

如果您知道#widget 的确切高度（在您的情况下为 100px），则可以通过使用绝对定位来避免使用 JavaScript：

#sidebar

height: 100%;
width: ...;
position: relative;


.widget

height: 100px;


#rest

position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;

【讨论】：

blog.stevensanderson.com/2011/10/05/… 提供了一个很好的演示。这种技术甚至适用于 IE7。

@ChristianNilsson fiddle 在 FF 49.0.2 中无法正常工作

【参考方案4】：

您可以使用嵌套的 div 标签来做到这一点。您有一个指定左侧的宽度，然后另一个留空。要填充另一侧的其余部分，您可以在右侧 div 内嵌套一个 100% 相对 div。像这样：

<div style="width:100%">
  <div style="width:300px;background-color:#FFFF00;float:left">
  </div>
  <div style="margin-left:300px">
    <div style="position:relative;left:0px;width:100%;background-color:#00FFFF">
    </div>
  </div>
</div>

【参考方案5】：

我在寻找类似问题的答案时遇到了这个问题，我想我会说明calc。在这篇文章中，calc 还不支持跨浏览器；但是，您可以检查this link here 以查看您的目标浏览器是否受支持。我修改了 matt 的假设案例以在 an example on jsFiddle 中使用 calc。从本质上讲，它是一个纯 CSS 解决方案，可以满足 casablanca 在他的回答中提出的建议。例如，如果浏览器支持calc，那么height: calc(100% - 200px); 和类似属性一样有效。

【参考方案6】：

我建议使用 table-element 作为替代：

+：干净的 CSS +：避免使用javascript -: 表语义被滥用 -: 不是请求的 div 元素

【参考方案7】：

有时解决方法可能是：

#rest 
  height: 100%;
  padding-bottom: 200px;

div 本身会太高，但由于有内边距，它的内容会有合适的高度。