Question

如何使用以下＆gt;＆gt; JSFiddle中的单元格填充行的高度：

＆＃13;

.x                    { height: 50px;          }
.row                  { background: #eee;      }
.row>:nth-child(odd)  { background: lightblue; }
.row>:nth-child(even) { background: pink;      }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3">fill height v</div>
  <div class="col-xs-9"> <div class="x"> unknown height </div> </div>
</div>

＆＃13;

PS。为了与移动设备兼容且IE 11，我无法使用flex

Answer 1

添加.row{display: flex}

＆＃13;

.x {  height: 50px; }
.row {background: #eee; display: flex;}
.row>:nth-child(odd) {
  background: lightblue;
}

.row>:nth-child(even) {
  background: pink;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3 cell">fill height v</div>
  <div class="col-xs-9 cell">
    <div class="x"> unknown height </div>
  </div>
</div>

＆＃13;

＆＃13; 宽度绝对位置jsfiddle.net/kth9vqhf

with display：table jsfiddle.net/kth9vqhf/1

使用jQuery https://jsfiddle.net/kth9vqhf/3/

Answer 2

使用jQuery，您可以动态计算.x的高度，并将其设置为单元格的最小高度。

＆＃13;

$('.col-xs-3.cell').css("min-height", $('.x').height() + "px");

＆＃13;

.x {
  height: 50px;
}

.row {
  background: #eee;
}

.row>:nth-child(odd) {
  background: lightblue;
}

.row>:nth-child(even) {
  background: pink;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-3 cell">fill height v</div>
  <div class="col-xs-9 cell">
    <div class="x"> unknown height </div>
  </div>
</div>

＆＃13;

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fill Row Height </title>
    <style>
        .WrapperRow{float: left; display: table; table-layout:  fixed; vertical-align: top; width: 100%;}
        .WrapperRow > div{display: table-cell; float: none; vertical-align: top; padding: 10px;}
        .bgblue{background-color: blue;}
        .cell.bgblue{width: 30%;}
        .bgpink{background-color: pink;}
    </style>    
</head>
<body>
    <div class="WrapperRow">
        <div class="cell bgblue">
        </div>
        <div class="cell bgpink">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsa natus, vel non earum, distinctio iusto reprehenderit alias quisquam possimus, at qui nostrum ad enim totam repudiandae consectetur eius iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illum, aut sunt molestias tempora amet maxime ipsum? Vero animi beatae, dicta? Ut repudiandae fugit alias quasi esse culpa. Facere, dolore?
        </div>
    </div>
</body>
</html>

填充块高度= 100％连续

3 个答案: