Javascript 如何使两个引导3列具有相同的高度？_Javascript_Html_Css_Twitter Bootstrap

Javascript 如何使两个引导3列具有相同的高度？

javascript html css twitter-bootstrap

Javascript 如何使两个引导3列具有相同的高度？,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在创建一个bootstrap3页面，左栏占25%，右栏占75%。在右栏中，我有一个可调整大小的div。我希望左栏的高度始终与右栏的高度相同（即使调整了右栏的div的大小）。以下是一些示例代码： <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

我正在创建一个bootstrap3页面，左栏占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>


#左{
边框样式：实心；
边框宽度：1px；
边框颜色：红色；
}
#调整大小权限{
溢出y：滚动；
调整大小：垂直；
最小高度：200px；
边框样式：实心；
边框宽度：1px；
边框颜色：绿色；
}
#静校正{
边框样式：实心；
边框宽度：1px；
边框颜色：蓝色；
}
左边
可调整大小的权利
静态权利

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

我是否可以添加一些css或js事件处理来实现这一点？我更喜欢纯css/js解决方案

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

一种方法是使用表，下面是一些代码，可以为您提供所需的内容

<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;
}


一些内容
更多内容
#a排{
显示：表格；
宽度：100%；
}
#a排面板{
浮动：无；
显示：表格单元格；
垂直对齐：顶部；
}

将所有这些放在您提供的代码中应该是这样的

 <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>


#左{
边框样式：实心；
边框宽度：1px；
边框颜色：红色；
}
#调整大小权限{
溢出y：滚动；
调整大小：垂直；
最小高度：200px；
边框样式：实心；
边框宽度：1px；
边框颜色：绿色；
}
#静校正{
边框样式：实心；
边框宽度：1px；
边框颜色：蓝色；
}
#a排{
显示：表格；
宽度：100%；
}
#a排面板{
浮动：无；
显示：表格单元格；
垂直对齐：顶部；
}
左边
可调整大小的权利
静态权利


左边
可调整大小的权利
静态权利

还可以在head标签中添加以下内容：

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

无需明确包含css样式。

这很好，但在测试时，我丢失了它之前占用的100%屏幕宽度。它是否不再占用整个

容器流体

div？可能会添加

#一行{宽度：100%；}

。我修改了我的答案，将其包括在内，以及开始和结束的html标记。在包含外部样式表之后说“不需要显式包含css样式”，这有点误导。您明确地包含了80行longI的意思是，在这种情况下不需要定制样式，只需包含一个已经由某人为此目的编写的样式表就足够了。无论如何，谢谢你，我会学会更好地表达。

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