CSS:height-填充div的其余部分? [英] CSS: height- fill out rest of div?
问题描述
我想知道这是否可能与简单的CSS或者如果我必须使用JavaScript为此?
i wonder if this is possible with simple css or if i have to use javascript for this?
我有一个侧边栏在我的网站。一个简单的div#sidbar通常大约1024像素高,但是高度由于它的内容动态变化。
i have a sidebar on my website. a simple div#sidbar it's normally about 1024px high, but the height changes dynamically due to it's content.
所以让我们成像以下情况:
so let's imaginge the following case:
<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填充边栏的其余部分,直到它到达底部
i want the div#rest to fill out the rest of the sidebar till it reaches the bottom of the div#sidebar.
推荐答案
>你想要的是 100% - 200px
,但CSS不支持这些表达式。 IE有一个非标准的表达式功能,但如果你想让你的页面在所有浏览器上工作,我看不到没有JavaScript的方法。或者,你可以使所有 div
的使用百分比高度,所以你可以有10%-10%-80%。
What you want is something like 100% - 200px
but CSS doesn't support expressions such as these. IE has a non-standard "expressions" feature, but if you want your page to work on all browsers, I can't see a way to do this without JavaScript. Alternatively, you could make all the div
s use percentage heights, so you could have something like 10%-10%-80%.
更新:这里是一个使用JavaScript的简单解决方案。每当边栏中的内容更改时,只需调用此函数:
Update: Here's a simple solution using JavaScript. Whenever the content in your sidebar changes, just call this function:
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';
};
这篇关于CSS:height-填充div的其余部分?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!