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

【问题标题】：CSS height 100% in automatic brother div not working in Chrome自动兄弟div中的CSS高度100％在Chrome中不起作用
【发布时间】：2014-07-29 16:39:34
【问题描述】：

无法修复...

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

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

【问题讨论】：

为什么不包括第一个 div 的完整 css 代码呢？你也可以包含一个 www.jsfiddle.net 链接来帮助人们帮助你。
为你的内部 div 添加 display:table-cell 而不是 display:table;
FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT 不是有效属性。您可能想在此之前关闭 div 。另外，请避免使用内联样式..它使您的代码不可读且难以使用...单独的样式表也可以避免重复..Why Use CSS
我使用内联来更容易解决问题...我使用 css 和所有它。

标签： html css google-chrome

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

为您的子 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会自动调整它的高度。检查一下，如果有任何问题，请告诉我。

【讨论】：

只是一个快速点，如果表格设置为高度 100% 并且它采用该高度，那么内部表格单元格也将采用该高度并忽略 400px