html - 子 div 的高度未拉伸(stretch)到父 div 的自动高度的 100%

Question

我又想不通为什么黄色 div 的高度没有拉伸(stretch)到父容器 height 的 100%。是的，父容器的 height 设置为 auto 但蓝色 div 的 height 也是 100 % 并且里面有内容，所以我假设父级 div 也会增加高度来适应这个(你可以看到黄色 div 下面的粉红色，它是父级的一部分).高度在那里，为什么黄色的 div 没有向下延伸到父 div 的 height 的 100%？

我试过将父 div 显示为 table 并将子 div 显示为表格单元格。将所有父元素设置为其他帖子建议的 100% 高度也不起作用。

前几天我遇到了这个问题，通过显示为表格和表格单元格解决了这个问题:Inner div's height not stretching down to 100% size

不确定为什么相同的解决方案不起作用，因为原理是相同的。

如有任何帮助和解释，我们将不胜感激。

#software {
  width: 100%;
  height: auto; /* HAS TO BE AUTO */
  background: pink;
  float: left;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  width: 45%;
  float: left;
  text-align: left;
  height: 100%;
}

#software-image {
  background: yellow;
  width: 55%;
  float: right;
  height: 100%;
}

.sections {
  max-width: 960px;
  height: auto;
  background: #0f0;
  margin: 0 auto 50px auto;
  overflow: auto;
}

h1 {
  border-bottom: 1px solid red;
  background: lightblue;
  display: inline;
  padding: 10px;
  font-size: 25px;
  margin: 30px 0;
}

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but also the leap
      into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentiall also the leap into electronic typesetting, remaining essentially
      unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

Answer 1

height: 100% 不适用于具有 height: auto 的容器的子项。

flexbox

使用 flexbox 实现所需的布局。 flex 元素(具有 display: flex 的容器的直接子项)默认会拉伸(stretch)，因此您可以删除 height: 100%。 flex 元素也不关心float。演示:

#software {
  width: 100%;
  background: pink;
  /* become a flex-container */
  /* its children will be flex-items */
  /* flex-items will stretch by default to maximum height */
  display: flex;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  width: 45%;
  text-align: left;
}

#software-image {
  background: yellow;
  width: 55%;
}

.sections {
  max-width: 960px;
  height: auto;
  background: #0f0;
  margin: 0 auto 50px auto;
  overflow: auto;
}

h1 {
  border-bottom: 1px solid red;
  background: lightblue;
  display: inline;
  padding: 10px;
  font-size: 25px;
  margin: 30px 0;
}

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but also the leap
      into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentiall also the leap into electronic typesetting, remaining essentially
      unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

表格布局

您可以使用表格布局实现相同的效果(display: table 用于容器，display: table-cell 用于子级)。这种方法具有最好的浏览器支持。演示:

#software {
  display: table;

  width: 100%;
  background: pink;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  width: 45%;
  text-align: left;
  display: table-cell;
}

#software-image {
  background: yellow;
  width: 55%;
  display: table-cell;
}

.sections {
  max-width: 960px;
  height: auto;
  background: #0f0;
  margin: 0 auto 50px auto;
  overflow: auto;
}

h1 {
  border-bottom: 1px solid red;
  background: lightblue;
  display: inline;
  padding: 10px;
  font-size: 25px;
  margin: 30px 0;
}

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but also the leap
      into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentiall also the leap into electronic typesetting, remaining essentially
      unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

Grid

你可以让你 #software 成为一个容器，并使用 CSS grid-template-columns 属性指定列宽(将列定义移动到容器中)。演示:

#software {
  display: grid;
  grid-template-columns: 45% 55%;
  width: 100%;
  background: pink;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  text-align: left;
}

#software-image {
  background: yellow;
}

.sections {
  max-width: 960px;
  height: auto;
  background: #0f0;
  margin: 0 auto 50px auto;
  overflow: auto;
}

h1 {
  border-bottom: 1px solid red;
  background: lightblue;
  display: inline;
  padding: 10px;
  font-size: 25px;
  margin: 30px 0;
}

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but also the leap
      into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentiall also the leap into electronic typesetting, remaining essentially
      unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>

要使其在 IE10+/Edge 中工作，您只需指定旧语法属性和网格项的手动对齐(默认情况下，IE/Edge 会将所有网格项堆叠在第一个单元格中)。演示:

#software {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 45% 55%;
  grid-template-columns: 45% 55%;
  width: 100%;
  background: pink;
  margin-top: 50px;
}

#software-text {
  background: lightblue;
  text-align: left;
}

#software-image {
  background: yellow;
  /* manual positioning for IE/Edge */
  -ms-grid-column: 2;
}

.sections {
  max-width: 960px;
  height: auto;
  background: #0f0;
  margin: 0 auto 50px auto;
  overflow: auto;
}

h1 {
  border-bottom: 1px solid red;
  background: lightblue;
  display: inline;
  padding: 10px;
  font-size: 25px;
  margin: 30px 0;
}

<section class="sections">
  <h1>Products</h1>
  <article id="software">
    <div id="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but also the leap
      into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentiall also the leap into electronic typesetting, remaining essentially
      unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div>
  </article>
</section>