CSS高度100％在自动兄弟div不工作在Chrome [英] CSS height 100% in automatic brother div not working in Chrome

问题描述

无法修复...

我有一个div，里面有2个div。第一个确定高度，第二个确定高度。但是chrome不想这样做。

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>

推荐答案

Flexbox是创建等高列的最简单方法：

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>

Flexbox不能在IE9及更早版本中使用。上面的Suresh想法在旧的浏览器中工作，但是代码中有一个错误（表单元格不浮动），并且更好地避免内联CSS：

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>

这篇关于CSS高度100％在自动兄弟div不工作在Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！