自动兄弟div中的CSS高度100％在Chrome中不起作用

Question

Can't fixed it...

I have a div with 2 divs inside. The first one determinates height and the second one takes that height. But chrome don't want to do it.

<div style="display: table; height: 100%; width: 100%; min-height: 100%;">
    <div FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT></div>

    <div style="box-sizing: border-box; display: table; float: right; 
    height: auto; min-height: 100%; padding: 0 20px 81px; position: relative; 
    width: 280px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; 
    -o-box-sizing: border-box;"></div>
</div>

Answer 1

Add display:table-cell property for your child div. So that automatically adjust the height of sibling divs.

 <div style="display:table; width:100%; height:100%; border:1px solid #f000ff;">
    <div style="height:400px; display:table-cell; background-color:#ff000f;">My Main Content</div>
    <div style="display:table-cell; float:right; height:100%; background-color:#ff00ff;">My Sample Content</div>
</div>

Check the Working JSFIDDLE HERE

In the above fiddle I have assigned the first child div height as 400px. If you modify this height, the right side div automatically adjust its height. Check it out and let me know if any issues.

Answer 2

Flexboxes are the easiest way to create columns of equal height:

<style>
  .container {
    display: flex;
    display: -mx-flexbox; // IE10
    display: -webkit-flex; // Safari
    flex-grow: 0;
    -ms-flex-grow: 0; // IE10
    -webkit-flex-grow: 0; // Safari
  }
  .left, .right { width: 50%; }
  .left { 
    background-color: #c66; 
    height: 200px;
  }
  .right { background-color: #66c; }
</style>


<div class="container">
  <div class="left">
    <p>This is the left DIV.</p>
  </div>
  <div class="right">
    <p>This is the right DIV.</p>
    <p>Its height is equal to the left DIV.</p>
  </div>
</div>

Flexboxes do not work in IE9 and older. Suresh idea above works in older browsers, but there is a mistake in the code (table cells don't float) and inline CSS is better avoided:

<style>
  .container { display: table; }
  .row { display: table-row; }
  .left, .right { 
    display: table-cell;
    width: 50%; 
  }
  .left { 
    background-color: #c66; 
    height: 200px;
  }
  .right { background-color: #66c; }
</style>


<div class="container">
  <div class="row">
    <div class="left">
      <p>This is the left DIV.</p>
    </div>
    <div class="right">
      <p>This is the right DIV.</p>
      <p>Its height is equal to the left DIV.</p>
    </div>
  </div>
</div>