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

CSS: height- fill out rest of div?

提问by matt

i wonder if this is possible with simple css or if i have to use javascript for this?

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

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.

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

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>

i want the div#rest to fill out the rest of the sidebar till it reaches the bottom of the div#sidebar.

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

is this possible with pure css?

这可以用纯css吗？

采纳答案by casablanca

What you want is something like 100% - 200pxbut 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 divs use percentage heights, so you could have something like 10%-10%-80%.

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

Update:Here's a simple solution using JavaScript. Whenever the content in your sidebar changes, just call this function:

更新：这是一个使用 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';
};

回答by Jirka

If you know the exact height of #widget(100px in your case), you can avoid using JavaScript by using absolute positioning:

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

#sidebar
{
height: 100%;
width: ...;
position: relative;
}

.widget
{
height: 100px;
}

#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}

回答by table

I propose the table-element as an alternative:

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

• +: clean CSS
• +: avoiding javascript
• -: table semantically misused
• -: not the requested div-elements

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

回答by ricksmt

I came across this question while looking for an answer to a similar question, and I thought I'd illustrate calc. As of this post, calcis not yet supported cross-browser; however, you can check this link hereto see if your target browsers are supported. I've modified matt's hypothetical case to use calcin an example on jsFiddle. Essentially it is a pure CSS solution that does what casablanca proposes in his answer. For example, if a browser supports calc, then height: calc(100% - 200px);would be valid as well as for similar properties.

我在寻找类似问题的答案时遇到了这个问题，我想我会说明calc. 截至本文，calc尚不支持跨浏览器；但是，您可以在此处查看此链接以查看您的目标浏览器是否受支持。我修改马特的假设情况下使用calc的上的jsfiddle一个例子。从本质上讲，它是一个纯粹的 CSS 解决方案，它执行 casablanca 在他的回答中提出的建议。例如，如果浏览器支持calc，那么height: calc(100% - 200px);对于类似的属性也是有效的。

回答by ChrisW

Sometimes a workaround might be:

有时解决方法可能是：

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

The divitself will be too high, but because of the padding its content will have the right height.

在div本身将是太高，但因为填充它的内容将有合适的高度。

回答by Phillip Voyle

you can do this with nested div tags. you have one specifying the width on the left, and then another left blank. To fill the rest of the other side you nest a 100% relative div inside the right side div. like so:

你可以用嵌套的 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>

回答by James Hulse

Try

尝试

height: 100%;

or

或者

height: auto;