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

高度：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;

}

Products

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.

background image goes inside this yellow div & needs to stretch to 100% height

表格布局

您可以使用表格布局(显示：表格用于容器和显示：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;

}

Products

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.

background image goes inside this yellow div & needs to stretch to 100% height

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

}

Products

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.

background image goes inside this yellow div & needs to stretch to 100% height

为了在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;

}

Products

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.

background image goes inside this yellow div & needs to stretch to 100% height