Question

让多个div跨越包含div的父级高度的好方法是什么？固定高度？

请参见下图：

Simplest way to download and unzip files in Node.js cross-platform?

以下是建议的标记：

<div class="parent">

   <div class="child"> div1 </div>

   <div class="child"> div2 </div>

   <div class="child"> div3 </div>

</div>

子div应始终填充父div的整个高度，尽管它们中有多少但它们的高度不需要相等，应根据其内容进行更改。

因此，如果一个人有很多内容，它会更大，其余的会相应调整。

我已经使用表格完成了这项工作，但想到可能有一些简单的方法可以使用div，这将是有利的，因为它们更灵活的响应式布局。

是否有纯CSS解决方案？

Answer 1

让我们说你有这个：

＆＃13;

body {
  margin: 0;
}
.parent {
  background-color: peachpuff;
  min-height: 100vh;
}
.child:first-child {
  background-color: chartreuse;
}
.child:nth-child(2) {
  background-color: dodgerblue;
}
.child:last-child {
  background-color: coral;
}

＆＃13;

<div class="parent">

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <div class="child">
    Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc odio leo, accumsan in ipsum eu, porttitor ornare sapien.
  </div>

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
  </div>

</div>

＆＃13;

要达到此要求，您可以使用flexbox。

在您的父元素中使用：

display: flex;使其成为弹性容器。
flex-direction: column;更改主轴。

在您的孩子元素中使用：

flex: 1;在flex-items中分配可用空间。

flex：<positive-number> 相当于flex: <positive-number> 1 0。使弹性项目具有灵活性，并将弹性基础设置为零，导致一个项目收到指定比例的 flex容器中的可用空间。如果是flex容器中的所有项目使用这种模式，它们的大小将与指定的成比例 flex因子。

来源W3C。

＆＃13;

body {
  margin: 0;
}
.parent {
  background-color: peachpuff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.child {
  flex: 1;
}
.child:first-child {
  background-color: chartreuse;
}
.child:nth-child(2) {
  background-color: dodgerblue;
}
.child:last-child {
  background-color: coral;
}

＆＃13;

<div class="parent">

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <div class="child">
    Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc odio leo, accumsan in ipsum eu, porttitor ornare sapien.
  </div>

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
  </div>

</div>

＆＃13;

jsFiddle

Answer 2

您应该调查Flexbox（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

在这种情况下，您可以添加：

.parent { display:flex; flex-direction: column; }
.child { flex-grow:1; }

Flex-Direction：＆＃34;这将建立主轴，从而定义Flex项目放置在Flex容器中的方向。＆＃34;

Flex-Grow：＆＃34;如果所有项目的flex-grow都设置为1，则容器中的剩余空间将平均分配给所有子项。＆＃34;

Answer 3

flex: 1;将帮助保留元素甚至父容器。它可能变得非常棘手，所以刷一些flexbox信息。

我最喜欢的Flexbox快速参考指南位于css tricks。

始终确保在IE上测试最终代码，正常情况下，IE很难显示您希望它们显示的内容。

这是一个快速演示，在左侧包含一个不均匀的元素，以显示flexbox如何以不同的尺寸工作。在代码中包含一些注释，以帮助理解正在发生的事情的基础知识。

调整屏幕大小以查看响应速度。（查看全屏或使用小提琴，这里的迷你预览器似乎不喜欢我使用垂直高度（vh））

.container {
  display: flex;
  width: 100%;
  height: 100vh;
  font-size: 24px;
}
.left {
  display: flex;
  flex-direction: column; /* stack elements within on top of each other as opposed to row */
    width: 30%;
    text-align: center;
}
.left-block {
  display: flex;
  flex: 1; /* make element grow */
  justify-content: center;  /* horizontal align content */
  align-items: center; /* vertical align content */
}
.left-block:nth-child(1) { background-color: hsla(50, 20%, 50%, 1); }
.left-block:nth-child(2) { 
  background-color: hsla(150, 20%, 50%, 1);
  padding: 100px 0px; /* padding added to left two to deomonstrate an unevenly sized block */
}
.left-block:nth-child(3) { background-color: hsla(200, 20%, 50%, 1); }
.right {
  display: flex;
  flex: 1;
  background-color: hsla(300, 20%, 60%, 1);
}
.right-block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

<div class="container">
  <div class="left">
    <div class="left-block">left one</div>
    <div class="left-block">left two</div>
    <div class="left-block">left three</div>
  </div>
  <div class="right">
    <div class="right-block">
      righty
    </div>
  </div>
</div>

<强>拨弄

https://jsfiddle.net/Hastig/m1r4z8b5/

多个div跨越父级的高度

3 个答案:

jsFiddle