我再也无法弄清楚为什么黄色div的高度不会延伸到父容器100%的{{1}}。是的，父容器的height设置为height，但蓝色auto的{{1}}也是div并且内容包含内容，因此我会假设父级height也会增加高度来容纳这个（你可以看到黄色div下面的粉红色，它是父母的一部分）。高度是那么为什么黄色100%没有伸展到父div的{{1}}的100％？
我尝试将父div显示为height，将子div显示为表格单元格。将所有父元素设置为其他帖子建议的100％高度也不起作用。
前几天我遇到了这个问题，这个问题通过显示为表格来解决。表格单元格：Inner div's height not stretching down to 100% size
不确定为什么同样的解决方案不起作用，因为原理是相同的。
非常感谢任何帮助和解释。
divtable
答案 0 :(得分：5)
height: 100%对height: auto的容器子女无效。
使用flexbox实现所需的布局。 Flex项目（具有display: flex的容器的直接子项）将默认拉伸，因此您可以删除height: 100%。此外，flex-items不关心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 & 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 & 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 & 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 & needs to stretch to 100% height</div>
</article>
</section>
答案 1 :(得分：2)
移除浮动广告，使用父级display: table和子级display: table-cell上的divs。
#software {
width: 100%;
height: auto; /* HAS TO BE AUTO */
background: pink;
float: left;
margin-top: 50px;
display: table;
}
#software-text {
background: lightblue;
width: 45%;
text-align: left;
height: 100%;
display: table-cell;
}
#software-image {
background: yellow;
width: 55%;
height: 100%;
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 & needs to stretch to 100% height</div>
</article>
</section>
答案 2 :(得分：1)
您可以将display: flex;添加到ID #software
答案 3 :(得分：1)
要做到这一点，可以将一种方法放到id =“software”display：table和childs id =“software-text”和id =“software-image”display：table-cell，你必须删除此图层的浮动属性
你有