Question

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

<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中实现这一点吗？

Demo of my problem

Answer 1

你可以浮动h1元素。无论它的高度如何，它都可以工作，并且拉伸元件的内容将被推到它下面。但我不完全确定这是否是您正在寻找的。

编辑：我不确定您正在寻找什么样的browser support，但您也可以在table上将显示设置为.parent然后.stretch inherit高度。然后，您可以将列div嵌套在.stretch内并浮动它们。

已更新：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%;
}

Answer 2

如果您知道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 rest of div?

Answer 3

也许使用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;

}

Answer 4

在提出和回答这个问题以来，实现这一目标的更好方法已经出现：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>

Answer 5

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时，这将覆盖您的z-index: 1;元素。您可以在h1元素上使用.stretched来解决此问题，但如果您希望position:relative;元素中包含文字，我会建议不要这样做。

您的父div上需要position: absolute才能为{{1}}提供“挂钩”的内容。绝对定位元素，忽略其他元素，并放在它们之上，除非它们的z-index更高或者它们是它的子元素。

儿童元素与身高：100％被兄弟姐妹推动

5 个答案:

HTML

CSS