计划是使子 div 与父 div 中的空间一样大。
是否可以选择将父级 div 的完整高度应用到子元素上？
我只知道 css calc() 作为一个选项，但我不想实现这个选项。
另外我在图像中解释了这个问题。
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
<div class="parent">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="child1">
<div><textarea></textarea></div>
</div>
<div class="child2"></div>
<div class="child3"></div>
</div>
我会建议您使用 Flexbox 解决方案，因为据我所知，它应该是这种情况下的最佳选择。
让你的容器成为弹性容器，它的子容器有.flex--1上课会占满休息空间。
.flex--1 {
flex: 1 1 auto;
}
检查弹性盒doc https://css-tricks.com/snippets/css/a-guide-to-flexbox/详细信息。
.flex-rows {
display: flex;
flex-direction: column;
}
.flex--1 {
flex: 1 1 auto;
}
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
<div class="parent flex-rows">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="flex--1">
<div class="child1">
<div><textarea></textarea></div>
</div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
