Question

我在父div中有两个div，height设置为100%，

<div style="min-height:40px; border:solid 1px black; float:left; ;">
    <div style="border:solid 1px black; height:auto;  float:left;clear; width:49%;">
         First to set height
            First to set height    First to set height
            First to set height    
    </div>

    <div style="border:solid 1px red;float:left; width:49%;height: 100% ;">
           Why don't get the 100%
    </div>
</div>

不要理解为什么第二个div不接受它的父div高度。 Here is the jsFiddle

Answer 1

如果你想为div定位提供类似桌面的体验，那么最好使用：

display:table-cell位于父div上的2 div和display:table-row而不是浮点数。

这是一个更新的小提琴：fiddle

答案 1 :(得分：1)

查看第二个div here内的相同内容。我刚刚添加了

<div style="border:solid 1px red;float:left; width:49%;height: 100% ;">
    First to set height
            First to set height    First to set height
            First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height
        First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height
    </div>

希望有所帮助。

答案 2 :(得分：1)

如果不使用桌子或在这种情况下使用flexbox，那么在未知高度内拥有div 100％身高的孩子一直是一个谜，并且已经引导一些开发者进行其他创造性的黑客和答案like this。

作为表格的替代方案，您可以尝试使用flexbox，虽然在旧浏览器中并不完全支持它，所以您可能真的想要使用表格。（see here for browser support.）

这是一个flexbox示例。取自http://philipwalton.github.io/solved-by-flexbox/demos/grids/

HTML

<div class="Grid Grid--gutters Grid--flexCells">
    <div class="Grid-cell">
      <div class="Demo">
        Full-height, even when my content doesn't fill the space.
      </div>
    </div>

    <div class="Grid-cell">
      <div class="Demo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.
      </div>
    </div>
  </div>

CSS

.Grid--gutters {
margin-left: -1em;
}

.Grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Grid--gutters>.Grid-cell {
padding-left: 1em;
}

.Grid--flexCells>.Grid-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.Grid-cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.Demo {
    width: 100%;
    padding: .8em 1em 0;
    padding-bottom: 1em;
    margin-bottom: 1em;
    background: rgba(147,128,108,.1);
    border-radius: 3px;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

http://jsfiddle.net/5SHfq/9/

Answer 2