html – 子div的高度不会延伸到父div的自动高度的100％

概述我再也想不通为什么黄色div的高度没有拉伸到父容器高度的100％.是的,父容器的高度设置为自动,但蓝色div的高度也是100％并且内部有内容,所以我认为父div也会增加高度来容纳这个(你可以看到黄色div下方的粉红色,这是父母的一部分).高度是那么为什么黄色div不会向下延伸到父div的高度的100％？ 我已经尝试将父div显示为表格,将子节点显示为表格单元格.将所有父元素设置为其他帖子建议的10 我再也想不通为什么黄色div的高度没有拉伸到父容器高度的100％.是的,父容器的高度设置为自动,但蓝色div的高度也是100％并且内部有内容,所以我认为父div也会增加高度来容纳这个(你可以看到黄色div下方的粉红色,这是父母的一部分).高度是那么为什么黄色div不会向下延伸到父div的高度的100％？

我已经尝试将父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 >  <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,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,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>

解决方法 高度：100％不适用于高度为：auto的容器的子容器.

FlexBox的

使用flexBox实现所需的布局. Flex项目(带有display：flex的容器的直接子项)默认会拉伸,因此您可以删除高度：100％. flex-items也不关心花车.演示：

#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 >  <h1>Products</h1>  <article ID="software">    <div ID="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,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>

表格布局

您可以使用表格布局(显示：表格用于容器和显示：table-cell for children)实现相同的目的.这种方法具有最佳的浏览器支持.演示：

#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 >  <h1>Products</h1>  <article ID="software">    <div ID="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,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

您可以使用CSS grID-template-columns属性(将列定义移动到容器)使#software成为容器并指定列宽.演示：

#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 >  <h1>Products</h1>  <article ID="software">    <div ID="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,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 >  <h1>Products</h1>  <article ID="software">    <div ID="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,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>

总结

以上是内存溢出为你收集整理的html – 子div的高度不会延伸到父div的自动高度的100％全部内容，希望文章能够帮你解决html – 子div的高度不会延伸到父div的自动高度的100％所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。