如果我的html页面上的内容高度％100，我如何制作侧边栏？

Question

我的英语不太好，抱歉。

我正在开发一个关于css和html的项目。

这是我的问题：我希望我的侧边栏高度与我的内容页面一样长。 如果我在内容页面添加内容，则左侧导航的高度应与内容页面相同。

<div class="container">
    <div class="container-fluid">

        <div class="leftnav">
            xxx
        </div><!-- leftnav -->
        <div class="content">
            xx
        </div><!-- content -->

    </div><!-- container-fluid -->
</div> <!-- container -->

.container{width: 1170px;margin:0px auto;}
.container-fluid{float: left;width: 100%;}

.leftnav{float: left;width: 280px;background: #fff;}
.content{float: left;width: 890px;background: #000;}

Answer 1

对我来说，最好的方法是将元素设置为100％，就像我在下面所做的那样。

我放了一些颜色，这样你就可以看到你在看什么。

html, body {
  height: 100%;
  margin: 0;
}

.container {
  width: 1170px;
  margin: 0px auto; 
  display: block;
  height: 100%; 
}

.container-fluid{
  float: left; 
  width: 100%;
  height: 100%; 
}

.leftnav{
  float: left; 
  width: 280px; 
  height: 100%; 
  background: red;
}

.content{
  float: left; 
  width: 890px; 
  height: 100%; 
  background: #ccc;
}

<div class="container">
    <div class="container-fluid">

        <div class="leftnav">
            xxx
        </div><!-- leftnav -->
        <div class="content">
            xx
        </div><!-- content -->

    </div><!-- container-fluid -->
</div> <!-- container -->

Answer 2

使用flexbox。将display: flex添加到.container-fluid即可实现此目标。

另请参阅：How do I keep two divs that are side by side the same height?

请注意browser support for flexbox，特别是对于IE。

Answer 3

通常我会使用JavaScript来执行此任务（因为我的大多数项目都需要对旧版浏览器进行大量向后兼容）。

试试这个JavaScript / jQuery：

sidebar = $('.leftnav');
main = $('.content');

if(sidebar.outerHeight() > main.outerHeight()){
    main.css('height',sidebar.outerHeight());
} else {
    sidebar.css('height',main.outerHeight());
}