8

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

<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

4

5 回答 5

10

自从提出并回答了这个问题以来，已经出现了一种更好的方法来实现这一点：flex-box。

只需将父级的显示设置为“flex”，将 flex-direction 设置为“列”，并将“有弹性”子级的高度设置为“继承”。子级将继承一个高度，但会留下多少像素来填充其父级。

在以下示例中，标记为 /* 重要 */ 的行是实际解决方案的一部分；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>

于 2017-10-18T21:09:14.370 回答
3

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

编辑：我不确定您正在寻找哪种浏览器支持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%;
}
于 2013-04-10T16:43:04.117 回答
1

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

}
于 2013-04-10T18:17:00.043 回答
1

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

于 2013-04-10T16:54:59.097 回答
-1

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一些“挂钩”的东西。绝对定位元素，忽略其他元素并放置在它们之上，除非它们的 z-index 更高或者它们是它的子元素。

于 2013-04-10T16:43:17.140 回答