CSS:height-填充div的其余部分?

前端之家收集整理的这篇文章主要介绍了CSS:height-填充div的其余部分?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道这是否可能与简单的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吗?

解决方法

你想要的是像100% – 200px,但CSS不支持这样的表达式。 IE有一个非标准的“表达式”功能,但如果你想让你的页面在所有浏览器上工作,我没有看到没有JavaScript的方法。或者,你可以使所有的div使用百分比高度,所以你可以有像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';
};
原文链接:https://www.f2er.com/css/221545.html

猜你在找的CSS相关文章