左侧边栏与内容区域高度相同，页脚位于浏览器窗口底部

Question

我在使用 Bootstrap 3.3.7 创建布局时遇到了一些困难。

我设置了一个小提琴来展示我所拥有的：https://jsfiddle.net/b8ukxb41/5/

我似乎无法解决 3 个问题：

1. 我希望左侧导航菜单（以红色边框为轮廓）与内容区域（以蓝色边框为轮廓）具有相同的高度。

2. 无论内容区域内有多少内容，页脚都应始终位于浏览器窗口的“底部”。我确实不想要粘性页脚 - 如果浏览器中出现滚动条，页脚应该始终位于浏览器窗口的底部，而不是粘性页脚。

3. 如果内容区内容较多，右侧应有滚动条。但是，左侧导航菜单应保持在固定位置。

我能描述的最接近的就是 Gmail，您可以在其中向下滚动右侧的邮件列表，但左侧的文件夹导航保持在固定位置 - 并且左侧列一直向下到浏览器窗口的底部。

我尝试了以下方法来解决问题，但这些解决方案都不起作用：

1. 在带有绿色边框的容器上使用display: flex;，即<div class="container-fluid" style="border:1px solid green; display: flex;">。这似乎没有任何作用。我基于How can I make Bootstrap columns all the same height?中的信息

2. 我尝试使用以下 CSS 作为页脚：

    footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }
   

这样做的问题是，有时页脚会出现在带有红色边框的导航菜单“内部”。如果您向右滚动到窗口底部，它只会显示在浏览器窗口的底部。

1. 我不知道该怎么做，尽管我想要的效果与此处显示的一样：https://codepen.io/sass-munch/pen/YerOLG

下图总结了我想要实现的总体目标：红色边框导航应该与蓝色边框内容区域的高度相同。标题应该是固定的。页脚应始终出现在浏览器窗口的底部 - 无论蓝色内容区域中有多少内容：

Answer 1

根据给定的HTML

没有flexbox

• 设置页脚高度，例如50px。

• 主要内容、侧边栏和右侧.content：

  高度：calc(100vh - 100px)（50 像素导航栏高度和 50 像素页脚高度）。

• 将.content设置在右侧 侧面 overflow-y: auto。

示例

main,
main aside,
main .content {
  height: calc(100vh - 100px);
}

main {
  margin-top: 50px;
}

main aside,
main .content {
  padding: 15px 0;
}

main aside {
  background: red;
}

main .content {
  overflow-y: auto;
  background: blue;
}

.footer {
  height: 50px;
  line-height: 50px;
  background: #F8F8F8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- /.nav-collapse -->
  </div>
  <!-- /.container -->
</div>
<!-- /.navbar -->

<main>
  <div class="container-fluid">
    <div class="row">
      <aside class="hidden-xs col-sm-3">
        <ul>
          <li>List 1</li>
          <li>List 2</li>
          <li>List 3</li>
          <li>List 4</li>
          <li>List 5</li>
        </ul>
      </aside>
      <div class="content col-sm-9">
        <div class="jumbotron">
          <a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
          <h1>test</h1>
          <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
      </div>
    </div>
  </div>
</main>

<footer class="footer">
  <div class="container-fluid">
    Footer
  </div>
</footer>

Answer 2

我不能说问题 2) 和 3)，但快速浏览一下就会告诉我你的#sidebar 有一个“margin-top: 10px;”对其进行统治。删除此规则，使红色和蓝色框的起始高度相同。

Answer 3

带红色边框的导航应该与带蓝色边框的内容区域高度相同。标题应该是固定的。页脚应始终出现在浏览器窗口的底部 - 无论蓝色内容区域中有多少内容：

Flexbox 可以做到这一点。

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.container {
  height: 100vh;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
}

header {
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: grey;
  color: white;
  text-align: center;
  padding: 1em;
}

.content {
  flex: 1;
  display: flex;
}

aside {
  flex: 0 0 200px;
  background: red;
  overflow-y: auto;
  padding: .5em;
}

main {
  flex: 5;
  background: blue;
  overflow-y: auto;
}

.mini-spacer {
  height: 500px;
}

.spacer {
  height: 1000px;
}

footer {
  height: 50px;
  width: 100%;
  background: grey;
  color: white;
  text-align: center;
  padding: 1em;
}

<div class="container">
  <header>HEADER</header>
  <div class="content">
    <aside>
      <div class="mini-spacer"></div>
    </aside>
    <main>
      <div class="spacer">
      </div>
    </main>
  </div>
  <footer>FOOTER</footer>

</div>