Fatal编程技术网
  • css/
  • Css 身高的儿童元素：100%被兄弟姐妹推

Css 身高的儿童元素：100%被兄弟姐妹推

css

Css 身高的儿童元素：100%被兄弟姐妹推,css,height,stretching,Css,Height,Stretching,我有一个非常简单的结构： <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 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%
可以达到这个效果，直到你添加了一些其他元素将内容向下推

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

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

有什么方法可以在纯CSS中实现这一点吗

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

编辑：我不确定您要找的是哪种类型，但您也可以在
上将显示设置为
表格
。父项
，然后进行
。拉伸
继承
高度。然后，您可以将列div嵌套在
.stretch
的内部并浮动它们

已更新：

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>
HTML

这将覆盖
h1
元素，因为
.stretch
将覆盖它。你可以通过使用
z-index:1h1
元素上的code>，但如果您希望
.stretch
元素中包含文本，我建议您不要使用它

您需要
位置：相对以提供要“钩住”的
位置：绝对
对象。绝对定位元素，忽略其他元素并放置在它们上面，除非它们的z指数更高或它们是它的子元素。
如果您知道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;
}


例如：

如果您不知道H1的高度，恐怕您可能需要使用JavaScript或thgaskell的方法


请看这篇文章以了解更多信息，并以JS:
为例说明是否可以使用display:table属性来满足您的需要

编辑：这个答案实际上看起来像thgaskell的答案，但我没有使用浮动，而是使用表行和表单元格显示，它似乎实现了您想要的结果

以下是JSFIDLE：


自从这个问题被提出和回答以来，一个更好的方法已经出现了

只需将父对象的显示设置为“flex”，将flex direction设置为“column”，并将“stretchy”子对象的高度设置为“inherit”。子对象将继承剩余多少像素以填充其父对象的高度

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



.parent{
显示：flex；/*重要*/
弯曲方向：列；/*重要*/
高度：150像素；
边框：6px纯绿；
}
h1{
背景：蓝色；
边际：0px；
高度：90px
}
.伸展{
背景：红色；
高度：继承；/*重要*/
}



元素占用空间
内容不多，但需要延伸到最后。

使用
位置：绝对
在
div.stretch
上，需要添加
位置：相对
发送给您的
部门家长
您知道
的高度吗？我不是肯定的，但是你可以从stretch开始使用负边距（减去h1的高度）…@AdamPlocher在这个特定的例子中，我确实知道我的
h1
的高度。但将来可能不会出现这种情况（我实际上是通过使用
overflow:hidden
修补了这个特定案例），因此我想找到一个可能适用于这个一般问题的解决方案。同样，这里无法看到解决方案，我将使用overflow:hidden属性。在您的示例中，如何为容器提供深色，为h1标记提供透明色，例如这里？？？@Jako我为元素提供背景色只是为了举例，以便显示元素的行为以及它们的位置。在我的具体案例中，我实际上必须使用border，而具体的问题更像是我发布给thgaskell的答案。通过这种方式，
h1
元素被覆盖和隐藏。你到底想要什么？如果
.stretch
元素占据整个高度，它必须在标题上方或下方。是的，这就是当前的问题；我一直在寻找一种让元素占据剩余高度的方法。只要背景色不重要，这似乎是最好的方法+对你来说，这是一个有趣的解决方案。要完全发挥作用，有必要将
width:100%
添加到
h1
中，因为浮动标题向下推内容只是巧合。不幸的是，这并不能解决问题，因为元素最终的布局方式。检查除了背景之外，哪些边界被弄乱了；孩子们也需要在其中漂浮。更新了答案。看起来webkit浏览器会折叠页边距，因此h1的顶部页边距不包含在
.parent
中。我想你可以用填充来交换边距，得到元素周围的间距。如果所有其他方法都失败了，还有javascript:）这绝对是解决问题的全面解决方案。我喜欢。哎呀，我不确定是接受这个还是塞盖斯凯尔的答案，但我猜我会接受后者，因为它来得更早。尽管如此，还是让我投赞成票吧！：）

<!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>



.parent {

  background-color: #eee;
  border: 1px solid black;
  width: 300px;
  height: 600px;
  position:relative;

}

.stretch {

  background-color: #ddd;
  height: 100%;
  position: absolute;  
  top: 0;
}



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



.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;

}