-2

我创建了 3 个 div，我必须设置我尝试使用 height:100% 的所有高度，但它不起作用。所有这些 div 的内容都有变化，但我需要所有高度相同。请帮助我！

<html>

<style type="text/css">

.b1{height:190px;width:150px;background:#963;float:left}
.b2{height:150px;width:150px;background:#955;float:left}
.b3{height:180px;width:150px;background:#966;float:left}

</style>
</head>

<body>

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>

</body>
</html>
4

4 回答 4

3

您需要将所有父元素的高度设置为 100%，在您的情况下，它将是：

body,html { height: 100%; }

演示：http: //jsfiddle.net/Cb4nU/3/

于 2013-01-18T11:54:16.703 回答
2

将此代码放在您的CSS中。我想这会帮助你.. 

 .b2{
    margin: 1px;
    background-color: ; 
    height: 100px;
    width:100px; 
    border: 1px solid ;
}
 .b2 {
    margin: 1px;
    background-color: ; 
    height: 100px;
    width:100px; 
    border: 1px solid ;
    }
 .b3 {
    margin: 1px;
    background-color: ; 
    height: 100px;
    width:100px; 
    border: 1px solid ;
}

干杯...！

于 2013-01-18T12:08:31.157 回答
0

将所有 3 个包装在一个 div 中，并使用您希望它们拉伸到的高度也可以使用 http://jsfiddle.net/Cb4nU/2/

<div class="a">
<div class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa, accumsan ut volutpat id, gravida porta turpis. Duis tincidunt feugiat est nec rhoncus.    </div>
<div class="b2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa,</div>
<div class="b3">Lorem ipsum dolor sit amet</div>
</div>


.a{height:300px;}
.b1{height:100%;width:150px;background:#963;float:left}
.b2{height:100%;width:150px;background:#955;float:left}
.b3{height:100%;width:150px;background:#966;float:left}
于 2013-01-18T11:57:54.143 回答
0

嗨，下面的代码片段会做必要的，

CSS：

.parent { display:table; }
.b1{ border:1px solid red; display:table-cell; width:150px;background:#963;}
.b2{ border:1px solid green; display:table-cell; height:150px;width:150px;background:#955;}
.b3{ border:1px solid blue; display:table-cell; width:150px;background:#966;}

HTML

<div class="parent">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>

变化 ：

  1. 添加了父容器 div
  2. 从 CSS 中的所有 div 中删除了height和float:left属性
  3. 为 CSS 中的所有 div添加了显示属性
于 2013-01-18T13:04:28.063 回答