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

Fiddler：http://jsfiddle.net/H2c6g/

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

Answer 1

只要您还在包裹width: 100%上定义高度，就可以在内部<section>上使用<div>。试试这个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＆＃39; s 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%;
}

<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

如果您不需要支持旧的IE浏览器，则可以使用flexbox ....请在下面查看。

display：flex

请注意，我只为.left类设置高度.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/

高度100％，两个div使用左右浮动（有清晰）

5 个答案: