Question

实际上如何使行内的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/

由于

Answer 1

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

谢谢，

Answer 2

你可以试试这个：

function sidebarHeight(){
var tallest = $('.right').height();
$('.left').height(tallest);
}
sidebarHeight();
$(window).on("resize", function(){
sidebarHeight();
});

示例：https://jsfiddle.net/x63qtvsh/9/

注意：您将需要jQuery库。

行内部引导div 100％高度

2 个答案: