高度:100%的Children元素被兄弟姐妹推入

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

<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%的伎俩，直到你添加一些其他的元素，推动内容向下。

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

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

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

演示我的问题

自从这个问题被提出和回答之后，一种更好的方法出现了:flex-box。

只需将父元素的显示设置为"flex"，flex-direction设置为"column"，并将"stretchy"子元素的高度设置为"inherit"。子元素将继承其父元素剩余的高度。

在以下示例中，标记为/* important */的行是实际解决方案的一部分;CSS的其余部分只是为了让它在视觉上更容易理解。

.parent {
  display: flex; /* important */
  flex-direction: column; /* important */
  height: 150px;
  border: 6px solid green;
}
h1 {
  background: blue;
  margin: 0px;
  height: 90px
}
.stretch {
  background: red;
  height: inherit; /* important */
}

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

可以浮动h1元素。无论它的高度是多少，它都可以工作，并且拉伸元素的内容将被推到它的下方。但我不完全确定这是否是你要找的。

EDIT:我不确定你在寻找什么样的浏览器支持，但你也可以将.parent上的显示设置为table，然后将.stretch inherit设置为高度。然后你可以在.stretch内嵌套列div并浮动它们。

: http://jsbin.com/oluyin/2/edit

<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%; }

如果你知道你的H1的高度，你可以这样做来填充孩子:

.parent { background-color: #eee; border: 1px solid black; width: 300px; height: 600px; position:relative; } h1 { Height: 100px; } .stretch { background-color:#dddddd; position: absolute; left: 0; width: 100%; top: 100px; bottom: 0; }
示例:http://jsbin.com/apocuh/1/edit
如果你不知道H1的高度，恐怕你可能需要使用JavaScript或thgaskell的方法。

看一下这篇文章了解更多信息，还有一个JS: CSS: height- fill out ofdiv?

也许使用display:table属性适合您的需要?
编辑:这个答案实际上看起来像thgaskell的一个，但不是使用浮动，我使用表行和表单元格显示，它似乎实现了你正在寻找的。

这是jsfiddle: http://jsbin.com/ebojok/17/edit

.parent { background-color: #eee; border: 1px solid black; width: 600px; height: 600px; display:table; } h1{ display:table-row; width:100%; } .stretch{ vertical-align:top; display:table-cell; height:100%; background-color: #ddd; }

HTML
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="parent"> <h1>Element taking space</h1> <div class="stretch">Not much content, but needs to be stretched to the end.</div> </div> </body> </html>
CSS

.parent { background-color: #eee; border: 1px solid black; width: 300px; height: 600px; position:relative; } .stretch { background-color: #ddd; height: 100%; position: absolute; top: 0; }
http://jsbin.com/amesox/1/edit
这将覆盖你的h1元素，因为.stretched越过它。你可以通过在你的h1元素上使用z-index: 1;来解决这个问题，但如果你想在你的.stretched元素中使用文本，我建议不要这样做。

你需要position:relative;在你的父div给position: absolute的东西"挂钩"。绝对定位元素，忽略其他元素并放在它们的顶部，除非它们的z-index更高或者它们是它的子元素。

HTML

相关内容

最新更新

热门标签：