html - css元素的高度怎么自动扩充到100%

Question

<p class="box">
    <p class="a"></p>
    <p class="b"></p>
</p>

box，a，b高度都根据内容增加，b的高度比a高，于是撑大box，这时a的高度怎么能和b或者box一样呢

Answer 1

<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>

Answer 2

100% is determined based on the height of the parent

Answer 3

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

Answer 4

http://jsbin.com/ruqebozetu/edit?html, css, output You can see if it has the effect you want. JQ did it.

Answer 5

flexbox

Answer 6

html,body,box,a,b{
    height:100%
}

Set the height of the parent element to 100%

Answer 7

.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

Answer 8

I can understand that there are several methods for equal height layout in css: http://www.w3cplus.com/css/creaet-equal-height-columns