高度的儿童元素:100％被兄弟姐妹推 [英] Children element with height: 100% getting pushed by siblings

问题描述

我有一个非常简单的结构:

I have a very simple structure:

<div class="parent">
    <h1>Element taking space</h1>
    <div class="stretch">
        Not much content, but needs to be stretched to the end.
    </div>
</div>

父级div具有设置的高度，并且我希望div.stretch一直拉伸到该高度，而不管其内容很少.使用height: 100%可以达到目的，直到添加其他将内容压低的元素.

The parent div has a set height, and I want div.stretch to stretch all the way to that height, regardless of how little content it has. Using height: 100% does the trick, until you add some other element which pushes the content down.

我猜想，指定height: 100%意味着该元素应具有与父元素完全相同的绝对/计算高度，而不是在计算完所有其他元素之后的剩余高度

I guess that specifying height: 100% means that the element should have the exact same absolute/computed height as the parent element, and not the remainder of the height after all the other elements have been computed.

设置overflow: hidden显然会隐藏溢出的内容，但这不是我的选择.

Setting overflow: hidden obviously hides the overflowing content, but that's not an option for me.

有什么办法可以在纯CSS中实现?

Is there any way I can achieve that in pure CSS?

> 我的问题演示

推荐答案

您可以浮动h1元素.无论高度如何，它都将起作用，并且拉伸元素的内容将被推到其下方.但是我不能完全确定这是否是您要寻找的东西.

You could float the h1 element. It would work no matter what height it is, and the content of the stretch element will be pushed below it. But I'm not entirely sure if this is what you are looking for.

编辑:我不确定您使用哪种浏览器支持在寻找，但您也可以在.parent上将显示设置为table，然后将高度设置为.stretch inherit.然后，您可以将列div嵌套在.stretch内并将其浮动.

EDIT: I'm not certain what kind of browser support you're looking for, but you could also set the display to table on .parent and then have .stretch inherit the height. Then you can nest the column divs inside of .stretch and float them.

已更新: http://jsbin.com/oluyin/2/edit

HTML

<div class="parent">
    <h1>Element taking space</h1>
    <div class="stretch">
        <div class="col">Not much content, but needs to be stretched to the end.</div>
        <div class="col">Not much content, but needs to be stretched to the end.</div>
    </div>
</div>

CSS

.parent {
    display: table;
}

.stretch {
    height: inherit;
}

.col {
    float: left;
    width: 50%;
}

这篇关于高度的儿童元素:100％被兄弟姐妹推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！