有没有办法做2个div有相同的高度?

时间:2015-11-12 22:52:02

标签: html css

我的CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width:100%;
}

.wrapper{
    width:80%;
    height:100%;
    min-height:auto
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    background:red;
}

.wrapped-nav{
    width:30%;
    float:left;
    background:green;
    height:auto;
    min-height:100%;
}

.wrapped-ent{
    width:70%;
    float:left;
    background:blue;
    height:auto;
    min-height:100%;
}

我的HTML

<body>
    <div class="wrapper">
        <div class="wrapped-nav">Nav
        </div>
        <div class="wrapped-ent"></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Example</div>
    </div>
</body>

jsbin:http://jsbin.com/cefegifula/edit?html,css,output

当我用那些放大了Ent div并且克服了div导航时,在jsbin节目中创建了一个空格,有没有办法做2个div具有相同的高度?

1 个答案:

答案 0 :(得分:0)

创建一个具有高度并重构代码的类,以便两个div都拥有它。

所以不要使用100%的两个div,而是使用vh,px或em。

我会写它以便你有这样的东西。

<div class="class1 heightfix">

</div>
<div class="class2 heightfix">
</div>

然后在你的css写

.heightfix{
  height: 70vh; // or px or whatever.
}

在其他新闻中,永远不要尝试使用<br/>来解决间距问题。