<p class="box">
<p class="a"></p>
<p class="b"></p>
</p>
box,a,b高度都根据内容增加,b的高度比a高,于是撑大box,这时a的高度怎么能和b或者box一样呢
迷茫2017-04-17 11:56:28
<style type="text/css">
<!-- display: table-cell-->
.a,
.b {
width: 50%;
color: white;
}
.a {
background-color: olive;
}
.b {
background-color: blue;
}
.box {
border: 1px solid red;
display: table;
width: 100%
}
.a,
.b {
display: table-cell;
vertical-align: top;
color: white;
}
</style>
<p class="box">
<p class="a">css元素的高度怎么自动扩充到100%</p>
<p class="b">
<p>css元素的高度怎么自动扩充到100%</p>
<p>css元素的高度怎么自动扩充到100%</p>
</p>
</p>
<!-- flex -->
<style type="text/css">
.a,
.b {
width: 50%;
color: white;
}
.a {
background-color: olive;
}
.b {
background-color: blue;
}
.box {
border: 1px solid red;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: -ms-flexbox;
-ms-flex-flow: row wrap;
}
</style>
<p class="box">
<p class="a">css元素的高度怎么自动扩充到100%</p>
<p class="b">
<p>css元素的高度怎么自动扩充到100%</p>
<p>css元素的高度怎么自动扩充到100%</p>
</p>
</p>
伊谢尔伦2017-04-17 11:56:28
a and b are floating. If you want a and b to be parallel, does this mean?
If the height cannot be fixed, you can use js to dynamically set a.style.height = b.style.height
迷茫2017-04-17 11:56:28
http://jsbin.com/ruqebozetu/edit?html, css, output You can see if it has the effect you want. JQ did it.
PHP中文网2017-04-17 11:56:28
html,body,box,a,b{
height:100%
}
Set the height of the parent element to 100%
巴扎黑2017-04-17 11:56:28
.box{
width:500px;
border:1px solid #ccc;
position: relative;
}
.a{
width:40%;
height:100%;
border:1px solid #f8d5d8;
position: absolute;
top:0;
bottom:0;
}
.b{
width:40%;
min-height:300px;
margin-left:41%;
border: 1px solid #008080;
}
Advantages: Meet your topic requirements
Disadvantages: 1. The height of b must be larger than a, which is relatively limited
If you have better support for the new features of CSS3, it is recommended to use flex
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
PHP中文网2017-04-17 11:56:28
I can understand that there are several methods for equal height layout in css: http://www.w3cplus.com/css/creaet-equal-height-columns