search

Home  >  Q&A  >  body text

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

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

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

天蓬老师天蓬老师2837 days ago749

reply all(8)I'll reply

  • 迷茫

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

    reply
    0
  • 阿神

    阿神2017-04-17 11:56:28

    100% is determined based on the height of the parent

    reply
    0
  • 伊谢尔伦

    伊谢尔伦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

    reply
    0
  • 迷茫

    迷茫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.

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:56:28

    flexbox

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:56:28

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

    Set the height of the parent element to 100%

    reply
    0
  • 巴扎黑

    巴扎黑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

    reply
    0
  • PHP中文网

    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

    reply
    0
  • Cancelreply