Question

我正在创建一个Bootstrap 3页面，左栏为25％，右栏为75％。在右列中，我有一个可调整大小的div。我希望左列的高度始终与右列的高度相同（即使在调整了div的大小之后）。这是一些示例代码：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style type="text/css">
        #left {
            border-style: solid;
            border-width: 1px;
            border-color: red;
        }
        #resizableRight {
            overflow-y: scroll;
            resize: vertical;
            min-height: 200px;
            border-style: solid;
            border-width: 1px;
            border-color: green;
        }
        #staticRight {
            border-style: solid;
            border-width: 1px;
            border-color: blue;
        }
    </style>
</head>

<body>        
    <!-- bootstrap container -->
    <div class="container-fluid">
        <div class="row">     
            <!-- 25% of screen -->
            <div id="left" class="col-md-3">
                Left
            </div>                    

            <!-- 75% of screen -->                   
            <div class="col-md-9">
                <div id="resizableRight">Resizable Right</div>
                <div id="staticRight">Static Right</div>
            </div>
        </div>
    </div>
</body>

我希望左侧的红色边框始终在底部与右侧的蓝色边框对齐。

我可以添加一些CSS或JS事件处理来实现此目的吗？我希望使用纯CSS / JS解决方案。

编辑：左div将容纳一些内容，这些内容可能会超出右侧的高度。我的目标是使其可滚动，但其可见高度由可调整大小的right元素控制。

Answer 1

一种实现方法是使用表，下面的代码应该为您提供所需的内容。

<div id="a-row" class="row">
  <div class="col-md-3 panel" style="background-color: red">
      some content
  </div>
  <div class="col-md-9 panel" style="background-color: green">
      some more content
  </div>
</div>


#a-row {
    display: table;
    width: 100%;
}

#a-row .panel {
    float: none;
    display: table-cell;
    vertical-align: top;
}

将所有内容一起放入您提供的代码中，应该看起来像这样。

 <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style type="text/css">
        #left {
            border-style: solid;
            border-width: 1px;
            border-color: red;
        }
        #resizableRight {
            overflow-y: scroll;
            resize: vertical;
            min-height: 200px;
            border-style: solid;
            border-width: 1px;
            border-color: green;
        }
        #staticRight {
            border-style: solid;
            border-width: 1px;
            border-color: blue;
        }
        #a-row {
            display: table;
            width: 100%;
        }

        #a-row .panel {
            float: none;
            display: table-cell;
            vertical-align: top;
        }
    </style>
</head>

<body>        
    <!-- bootstrap container -->
    <div class="container-fluid">
        <div id="a-row" class="row">     
            <!-- 25% of screen -->
            <div id="left" class="col-md-3 panel">
                Left
            </div>                    

            <!-- 75% of screen -->                   
            <div class="col-md-9 panel">
                <div id="resizableRight">Resizable Right</div>
                <div id="staticRight">Static Right</div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

<body>        
<!-- bootstrap container -->
<div class="container-fluid">
    <div class="row row-eq-height">     
        <!-- 25% of screen -->
        <div id="left" class="col-md-3">
            Left
        </div>                    

        <!-- 75% of screen -->                   
        <div class="col-md-9">
            <div id="resizableRight">Resizable Right</div>
            <div id="staticRight">Static Right</div>
        </div>
    </div>
</div>

还要在head标签中添加它：

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

不必明确包含CSS样式。

如何使两个bootstrap 3列具有相同的高度？

2 个答案: