Question

我一直在尝试不同的方式，但无法实现我想要的目标。

<div id="parent">
  <div id="child-1"></div>
  <div id="child-2"></div>
  <div id="child-3"></div>
</div>

所以#parent位于height: 100vh。

#child-1应该有父母的height: 100%。

#child-2和#child-3应该有width: 100%和height: auto，并且它们应该在bottom: 0位置叠加在一起。

我一直试图设置父亲亲戚和两个孩子绝对但第一个孩子的身高被忽略..我试过display flex，但第一个孩子的身高不是100父母的百分比..我很困惑如何做到这一点。

有人可以帮忙吗？

以下是我尝试实现的目标：jsfiddle.net

Answer 1

您必须先动态bottom #child-2值#child-3，因为它应该位于#child-3的顶部。

您需要应用jQuery动态获取#child-3的高度，然后将bottom的高度值应用于child-2的{{1}}值，就像

#child-2 {
  bottom: height-of-child-3;
}

请查看此Codepen

或者查看下面的代码段：

height_child_three = $('#child-3').height();

$('#child-2').css({
	position: 'absolute',
	bottom: height_child_three
});

#parent {
  width: 100vw;
  height: 100vh;
  background: #000;
  position: relative;
}

#child-1 {
  width: 100%;
  height: 100%;
  background: #eee;
}

#child-2 {
  width: 100%;
  background: #a0ea0e;
}

#child-3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #30e30e;
}

body { margin: 0; } /* A small reset */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child-1">
    <strong>I'm child 1</strong>
  </div>
  <div id="child-2">
    <strong>I'm child 2</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p>
  </div>
  <div id="child-3">
    <strong>I'm child 3</strong>
  </div>
</div>

希望这有帮助！

Answer 2

这是你需要的吗？

HTML：

<div id="parent">
  <div class="child-1"></div>
  <div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div>
  <div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div>
</div>

CSS：

html,
body,
div {
  margin: 0;
  padding: 0;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

#parent {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #ccc;
}

.child-1 {
  width: 100%;
  height: 100%;
  background: red;
}

.child-2 {
  width: 100%;
  height: auto;
  padding: 30px;
  background: blue;
}

.child-3 {
  width: 100%;
  height: auto;
  padding: 30px;
  background: green;
}

在这里，您可以看到使用纯CSS的解决方案。 CODEPEN

CSS布局推动Div底部

2 个答案: