Question

无法修复它......

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

<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

为您的子div添加display：table-cell属性。这样可以自动调整兄弟div的高度。

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

检查Working JSFIDDLE HERE

在上面的小提琴中，我将第一个子div高度指定为400px。如果修改此高度，右侧div会自动调整其高度。检查一下，如果有任何问题，请告诉我。

Answer 2

Flexboxes是创建相等高度列的最简单方法：

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

<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中工作

2 个答案: