身高100％使用浮动两个div左右（有明确的）

Question

很简单：

HTML：

<div> 
     <section class="left"> 

     </section> 
     <section class="right"> 

     </section> 
     <div class="clear"></div> 
    </div> 

CSS：

div, section { border: 1px solid #000; } 
.left { height: 100%; width: 200px; float: left; height: 200px; } 
.right { width: 300px; float: right; height: 300px; } 
.clear { clear: both; } 

提琴手：http://jsfiddle.net/H2c6g/

我如何为div使用100％的高度？

Answer 1

只要您还在包装<div>上定义了高度，您就可以在内部<section>上使用width: 100%。试试这个CSS：

div { height: 400px; background: #ccc; } 
.left { height: 100%; width: 200px; float: left; background: #c00; } 
.right { width: 300px; float: right; height: 300px; background: #00c; } 
.clear { clear: both; } 

Working Fiddle

Answer 2

只需使用：

body,html { 
    height: 100%; 
} 

，使div的height: 100%

在本更新fiddle

Answer 3

嗯不知道见过如果是这样你正在尝试做

<div class="outer"> 
     <section class="left"> 

     </section> 
     <section class="right"> 

     </section> 
     <div class="clear"></div> 
    </div> 


div, section { border: 1px solid #000; } 
.left { height: 100%; width: 200px; float: left; height: 200px; } 
.right { width: 300px; float: right; height: 300px; } 
.clear { clear: both; } 

div.outer{ 
    position:absolute; 
    height:100%; 
} 

Answer 4

您可以使用Flexbox的，如果你并不需要支持旧的ie浏览器....检查它的下面。

显示：弯曲

请注意，我只设置一个高度了。左类.right类的高度匹配。

http://jsbin.com/curoruni/1/edit

Answer 5

这里是我会怎么做，不使用任何花车

<div id="wrapper"> 
    <div class="left"></div><div class="right"></div> 
</div> 

而且

#wrapper { 
    border: 1px solid red; 
    height: 500px; 
    width: 100%; 
    overflow: hidden; 
    position: absolute; top: 0; left: 0; 
} 
.left { 
    position: relative; 
    background-color: yellow; 
    display: inline-block; 
    height: 100%; width: 50%; 
    margin: 0px; 
} 
.right { 
    position: relative; 
    background-color: blue; 
    display: inline-block; 
    width: 50%; height: 100%; 
    margin: 0px; 
} 

http://jsfiddle.net/fU379/