子div的高度未延伸到父div的自动高度的100％ [英] Child div's height not stretching to 100% of parent div's auto height
本文介绍了子div的高度未延伸到父div的自动高度的100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法再次弄清楚为什么黄色的 div 的高度没有延伸到父容器的 height 的 100％.是的，父容器的 height 设置为 auto ，但是蓝色的 div 的 height 也是 100％并在其中包含内容，因此我假设父 div 的高度也将增加以适应此高度(并且您可以看到黄色div下方的粉红色，这是父的一部分)).高度在那里，为什么黄色的 div 不能延伸到父级 div 的 height 的100％?
我尝试将父 div 显示为 table ，并将子 div s显示为表单元格.将所有父元素设置为其他帖子建议的100％高度也不起作用.
前几天，我遇到了这个问题，该问题通过显示为表格&表格储存格:内部div的高度未减小到100％的大小
由于原理相同，因此不确定为什么相同的解决方案不起作用.
任何帮助和解释将不胜感激.
#software {宽度:100％;高度:自动；/*必须自动*/背景:粉红色；向左飘浮;边距顶部:50像素;}#software-text {背景:浅蓝色；宽度:45％;向左飘浮;文字对齐:左；高度:100％;}#software-image {背景:黄色；宽度:55％;浮动:正确；高度:100％;}.sections {最大宽度:960px；高度:自动；背景:#0f0；边距:0自动50px自动;溢出:自动；}h1 {边框底部:1像素红色常亮；背景:浅蓝色；显示:内联；内边距:10px;font-size:25px;边距:30px 0;} < section class ="sections">< h1>产品</h1>< article id ="software">< div id ="software-text"> Lorem Ipsum自1500年代以来一直是业界标准的伪文本，当时未知的打印机接受了各种类型和规格的厨房，但是自1500年代以来，伪文本却一直存在，当时未知的打印机经历了类型和尖叫的厨房，但也实现了飞跃进入电子排版，当一个未知的打印机接受一个厨房的类型并发出尖叫声时，基本上保持不变，但也迈入了电子排版，仍然必不可少，也迈入了电子排版，基本上保持了当一个未知的打印机接受某种类型的厨房并发出尖叫声时，它保持不变，但是进入电子排版的飞跃也基本上保持不变.< div id ="software-image">背景图片位于该黄色div& amp;中；需要拉伸到100％的高度.</article></section> 解决方案
高度:100％不适用于具有 height:auto 的容器的子代.
Flexbox
使用flexbox实现所需的布局.弹性项目(带有 display:flex 的容器的直接子代)默认情况下会拉伸，因此您可以删除 height:100％.同样，flex-items不在乎 float .演示:
#software {宽度:100％;背景:粉红色；/*成为弹性容器*//*它的子项将是flex-items *//*弹性项目默认情况下会拉伸到最大高度*/显示:flex;边距顶部:50像素;}#software-text {背景:浅蓝色；宽度:45％;文字对齐:左；}#software-image {背景:黄色；宽度:55％;}.sections {最大宽度:960px；高度:自动；背景:#0f0；边距:0自动50px自动;溢出:自动；}h1 {边框底部:1像素红色常亮；背景:浅蓝色；显示:内联；内边距:10px;font-size:25px;边距:30px 0;} < section class ="sections">< h1>产品</h1>< article id ="software">< div id ="software-text"> Lorem Ipsum自1500年代以来一直是业界标准的伪文本，当时未知的打印机接受了各种类型和规格的厨房，但是自1500年代以来，伪文本却一直存在，当时未知的打印机经历了类型和尖叫的厨房，但也实现了飞跃进入电子排版，当一个未知的打印机接受一个厨房的类型并发出尖叫声时，基本上保持不变，但也迈入了电子排版，仍然必不可少，也迈入了电子排版，基本上保持了当一个未知的打印机接受某种类型的厨房并发出尖叫声时，它保持不变，但是进入电子排版的飞跃也基本上保持不变.< div id ="software-image">背景图片位于该黄色div& amp;中；需要拉伸到100％的高度.</article></section> 表格布局
您可以使用表格布局(容器使用 display:table ，儿童使用 display:table-cell )实现相同的效果.这种方法具有最佳的浏览器支持.演示:
#software {显示:表；宽度:100％;背景:粉红色；边距顶部:50像素;}#software-text {背景:浅蓝色；宽度:45％;文字对齐:左；显示:表格单元格；}#software-image {背景:黄色；宽度:55％;显示:表格单元格；}.sections {最大宽度:960px；高度:自动；背景:#0f0；边距:0自动50px自动;溢出:自动；}h1 {边框底部:1像素红色常亮；背景:浅蓝色；显示:内联；内边距:10px;font-size:25px;边距:30px 0;} < section class ="sections">< h1>产品</h1>< article id ="software">< div id ="software-text"> Lorem Ipsum自1500年代以来一直是业界标准的伪文本，当时未知的打印机接受了各种类型和规格的厨房，但是自1500年代以来，伪文本却一直存在，当时未知的打印机经历了类型和尖叫的厨房，但也实现了飞跃进入电子排版，当一个未知的打印机接受一个厨房的类型并发出尖叫声时，基本上保持不变，但也迈入了电子排版，仍然必不可少，也迈入了电子排版，基本上保持了当一个未知的打印机接受某种类型的厨房并发出尖叫声时，它保持不变，但是进入电子排版的飞跃也基本上保持不变.< div id ="software-image">背景图片位于该黄色div& amp;中；需要拉伸到100％的高度.</article></section> 网格
您可以使您成为 #software 容器，并使用CSS grid-template-columns 属性(将列定义移至容器)来指定列宽.演示:
#software {显示:网格；网格模板列:45％55％；宽度:100％;背景:粉红色；边距顶部:50像素;}#software-text {背景:浅蓝色；文字对齐:左；}#software-image {背景:黄色；}.sections {最大宽度:960px；高度:自动；背景:#0f0；边距:0自动50px自动;溢出:自动；}h1 {边框底部:1像素红色常亮；背景:浅蓝色；显示:内联；内边距:10px;font-size:25px;边距:30px 0;} < section class ="sections">< h1>产品</h1>< article id ="software">< div id ="software-text"> Lorem Ipsum自1500年代以来一直是业界标准的伪文本，当时未知的打印机接受了各种类型和规格的厨房，但是自1500年代以来，伪文本却一直存在，当时未知的打印机经历了类型和尖叫的厨房，但也实现了飞跃进入电子排版，当一个未知的打印机接受一个厨房的类型并发出尖叫声时，基本上保持不变，但也迈入了电子排版，仍然必不可少，也迈入了电子排版，基本上保持了当一个未知的打印机接受某种类型的厨房并发出尖叫声时，它保持不变，但是进入电子排版的飞跃也基本上保持不变.< div id ="software-image">背景图片位于该黄色div& amp;中；需要拉伸到100％的高度.</article></section> 要使其在IE10 +/Edge中运行，您只需要指定旧的语法属性和网格项目的手动对齐(默认情况下，IE/Edge会将所有网格项目堆叠在第一个单元格中).演示:
#software {显示:-ms-grid;显示:网格；-ms-grid-columns:45％55％；网格模板列:45％55％；宽度:100％;背景:粉红色；边距顶部:50像素;}#software-text {背景:浅蓝色；文字对齐:左；}#software-image {背景:黄色；/* IE/Edge的手动定位*/-ms-grid-column:2;}.sections {最大宽度:960px；高度:自动；背景:#0f0；边距:0自动50px自动;溢出:自动；}h1 {边框底部:1像素红色常亮；背景:浅蓝色；显示:内联；内边距:10px;font-size:25px;边距:30px 0;} < section class ="sections">< h1>产品</h1>< article id ="software">< div id ="software-text"" Lorem Ipsum自1500年代以来一直是业界标准的伪文本，当时未知的打印机接受了各种类型和规格的厨房，但是从1500年代起，伪文本却一直存在，当时未知的打印机经历了类型和尖叫的厨房，但也实现了飞跃进入电子排版，当一个未知的打印机接受一个厨房的类型并发出尖叫声时，基本上保持不变，但也迈入了电子排版，仍然必不可少，也迈入了电子排版，基本上保持了当一个未知的打印机接受某种类型的厨房并发出尖叫声时，它保持不变，但是进入电子排版的飞跃也基本上保持不变.< div id ="software-image">背景图片位于该黄色div& amp;中；需要拉伸到100％的高度.</article></section> I cannot figure out again why the height of the yellow div is not stretching to 100% of the height of the parent container. Yes the parent container’s height is set to auto but the blue div’s height is also 100% and has content inside, so I would assume the parent div would also increase in height to accommodate this (and you can see the pink below the yellow div, which is part of the parent). The height is there so why is the yellow div not stretching down to be 100% of the height of the parent div?
I’ve tried displaying the parent div as a table and children divs as table cells. Setting all parent elements to an 100% height suggested by other posts also do not work.
I had this problem the other day which was solved by displaying as table & table cells: Inner div's height not stretching down to 100% size
Not sure why the same solution does not work since the principle is the same.
Any help and an explanation would be greatly appreciated.
#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 & needs to stretch to 100% height</div>
</article>
</section>
解决方案
height: 100% doesn't work for children of container with height: auto.
Flexbox
Use flexbox to achieve desired layout. Flex-items (direct children of container with display: flex) will stretch by default, so you can remove height: 100%. Also flex-items don't care about floats. Demo:
#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>
Table layout
You can achieve the same using table layout (display: table for container and display: table-cell for children). This approach has the best browser support. Demo:
#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>
Grid
You can make you #software a container and specify column width using CSS grid-template-columns property (move column definition to container). Demo:
#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>
For this to work in IE10+/Edge you just need to specify old syntax properties and manual alignment of grid items (By default IE/Edge will stack all grid items in first cell). Demo:
#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>
这篇关于子div的高度未延伸到父div的自动高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
