子div的高度未达到父div的自动高度的100％

Question

我想不通为什么又黄的高度div不延伸到100%的height父容器中。是的父容器的height设置为auto，但蓝色div的height也100%并具有里面的内容，所以我会假设父div也将增加高度，以适应这个（你可以看到黄色的DIV，这是部分下方的粉红色家长）。高度在那里，为什么黄色div不延伸到height父代的100％div？

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

前几天我遇到了这个问题，可以通过显示为表格和表格单元格来解决：内部div的高度未减小到100％的大小

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

任何帮助和解释将不胜感激。

#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实现所需的布局。弹性项（容器的直接子项带有display: flex）在默认情况下会拉伸，因此您可以删除height: 100%。同样，flex-items不在乎floats。演示：

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

格网

您可以使您#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>