html - Bootstrap inside row div 100% 高度

实际上如何使行内的 div 等于 100% 高度，我的意思是左侧边栏将跟随高度，具体取决于正确的内容，

试着给一个高度:100%；但它不起作用，一些建议将不胜感激

<body>
 <div class="content">
  <div class="container main">
    <div class="row 2-col">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 left">
            <p>Sidebar</p>
            <p>Sidebar</p>
            <p>Sidebar</p>
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 right">
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
            <p>Content </p>
        </div>
    </div>
  </div>
 </div>
</body>

html, body, .content, .main, .2-col {
    width: 100%;
    height: 100%;
}
.content {
    background: #a1a1a1;
}
.main {
    background: #666;
}
.left {
    height: 100%;
    background: #333;
    box-sizing: border-box;
}
.right {
    height: 100%;
    background: #ccc;
    box-sizing: border-box;
}
p {
    color: #fff;
}

https://jsfiddle.net/x63qtvsh/4/

谢谢

最佳答案

一种解决方案是在 DOM 准备好后计算左侧边栏和右侧内容两列的高度。然后将两列的高度动态设置为最大高度。

谢谢，

关于html - Bootstrap inside row div 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31669170/