如何使兩個bootstrap 3列具有相同的高度？

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 個解決方案

解決方案1
0 2018-07-23 00:20:31

解決方案2
-1 2018-07-23 07:18:43

如何使兩個bootstrap 3列具有相同的高度？

問題描述

2 個解決方案

解決方案1 0 2018-07-23 00:20:31

解決方案2 -1 2018-07-23 07:18:43

解決方案1
0 2018-07-23 00:20:31

解決方案2
-1 2018-07-23 07:18:43