logo标签列表

子元素高度为100%被同级元素挤压了

cssheightstretching
10

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

<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 实现这一点？ 我的问题演示
在你的 div.stretch 上使用 position: absolute;，你需要在你的 div.parent 上加上 position: relative;。http://jsbin.com/amesox/1/edit - gaynorvader
你知道<h1>的高度吗？我不确定，但你可以尝试使用负边距（减去h1的高度）来拉伸... - Adam Plocher
在这种特定情况下，我确实知道我的h1的高度。但是将来可能不是这种情况（我实际上通过使用overflow: hidden修补了这种特定情况），因此我希望找到适用于这个一般问题的解决方案。 - Sunyatasattva
这里也一样，无法看到解决方案，我会使用overflow:hidden属性。在你的例子中，将深色赋予容器，将浅色赋予h1标签，例如这里http://jsbin.com/acotam/2/edit？ - Jako
@Jako 我只是举例说明了一下，给元素设置了背景颜色以展示元素的行为和位置。在我的具体情况中，我实际上需要使用边框，而具体的问题更类似于这个示例，我发布在thgaskell的答案中。 - Sunyatasattva
5个回答
12

自此问题得到提问和回答以来，一种更好的实现方式已经出现：弹性布局（flex-box）。

只需将父元素的display设置为"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>

3
你可以浮动h1元素。无论它有多高，伸展元素的内容都会被推到下面。但我不确定这是否是您要找的内容。
编辑：我不确定您正在寻找哪种浏览器支持，但您也可以在.parent上将显示设置为table，然后让.stretch继承高度。然后您可以将列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%;
}
只要背景颜色不重要，这似乎是最好的方法。加一分给你，先生。 - Adam Plocher
1
这是一个有趣的解决方案。为了完全生效，需要将 h1 添加 width: 100%，因为浮动标题只是偶然导致内容下移。不幸的是，由于元素最终布局的方式，这并不能解决问题。请查看此示例，其中除了背景之外，边框也会混乱；以及另一个示例，其中子元素也需要浮动。 - Sunyatasattva
更新了答案。看起来 Webkit 浏览器会折叠边距，所以 h1 的顶部边距不包含在 .parent 中。我认为你可以通过将边距与填充交换来获得元素周围的间距。如果其他方法都失败了，还有 JavaScript :) - thgaskell
这绝对是一个全面的解决方案。我喜欢它。 - Sunyatasattva
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：高度-填充其余div？

1
也许使用display:table属性可以满足您的需求？
编辑：这个答案实际上看起来像thgaskell的答案，但我使用的是table-row和table-cell显示而不是浮动，它似乎实现了您要寻找的东西。
这是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;

}
1
哎呀，我不确定是接受这个回答还是 thgaskell 的回答，但我猜我会接受后者，因为它更早。不过你的回答我会点赞的！ :) - Sunyatasattva
-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超过了它。您可以通过在h1元素上使用z-index: 1;来解决此问题，但如果您想在.stretched元素中放置文本，则我建议不要这样做。

您需要在父div上使用position:relative;，以便给position:absolute提供“挂钩”的东西。绝对定位的元素会忽略其他元素并将其放置在其上方，除非它们的z-index更高或它们是其子元素。

这样，h1元素就被覆盖和隐藏了。 - Sunyatasattva
你到底想要什么？如果.stretched元素占据了整个高度，它必须要么在标题上方，要么在标题下方。 - gaynorvader
是的，那就是问题所在；我正在寻找一种方法让元素占据剩余的高度。 - Sunyatasattva
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接