Html 当父高度为“自动”时，高度为100%_Html_Css_Twitter Bootstrap

Html 当父高度为“自动”时，高度为100%

html css twitter-bootstrap

Html 当父高度为“自动”时，高度为100%,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,例如，我有以下html： <html><head> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> .col-1{ height: 300px; } .col-2{ /*

例如，我有以下html：

<html><head>
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            .col-1{
                height: 300px;
            }
            .col-2{
                /*
                height: 100% not working, how to stretch col-2 like col-1
                */
            }
         </style>
    </head>
    <body>
        <div class="container">
            <div class="col-md-6 col-1">
            </div>
            <div class="col-md-6 col-2">
            </div>
        </div>

</body></html>


.col-1{
高度：300px；
}
.col-2{
/*
高度：100%不工作，如何像col-1一样拉伸col-2
*/
}

容器的高度为自动，但实际高度已定义，因为col-1高度为300px。如何将col-2高度设置为实际父级高度的100%？

也许您应该尝试使用“row-row eq height”类

尝试使用

而不是

并将此CSS属性添加到自定义CSS中

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

您必须在任何

col-*

之外添加

.row

，因为

col-*

具有float属性。要使

列-*

的高度相同，请使用此样式添加

.row eq height

：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

HTML如下所示：

<div class="container">
  <div class="row row-eq-height">
    <div class="col-md-6 col-1">
      a
    </div>
    <div class="col-md-6 col-2">
      b
    </div>
  </div>
</div>


A.
B

最小高度：100%通常有效

<html>
<head>
<style type="text/css">
.container {position:relative;height:600px;width:100%;background-color:black;}
.col-1{float:left;width:50%;height:300px;background-color:red}
.col-2{float:left;min-height:100%;width:40%;background-color:green}
</style>
</head>
<body>
<div class="container">
  <div class="col-md-6 col-1"></div>
  <div class="col-md-6 col-2"></div>
</div>
</body>
</html>


.container{位置：相对；高度：600px；宽度：100%；背景色：黑色；}
.col-1{浮点：左；宽度：50%；高度：300px；背景色：红色}
.col-2{浮动：左；最小高度：100%；宽度：40%；背景色：绿色}

以下是一个示例：

您正在使用引导，但我不在本例中。

我不想设置容器的高度。它由col-1高度定义。您只能使用父级的高度使子级达到其100%的高度。一个孩子只能在JS的帮助下与另一个孩子交谈。javascript读取.col-1的高度，然后告诉col-2重复该高度。这太棒了！非常感谢。