3 部分布局的动态高度

Question

在具有固定高度顶部导航栏、固定宽度侧导航栏的布局中，其余空间用于内容，如何使侧导航和内容填充剩余宽度，即使内容在内容窗格超出视口的高度。

This pen 会更准确地描述这种情况。您可以看到内容从#content div 继续。我怎样才能获得它以便侧面导航和内容窗格在页面的其余部分继续显示？

Answer 1

好的，这是一个有点老套的解决方案，但它确实有效！如果你愿意使用 JS，我会提供一个没有 hack 的：

CodePen

* {
  box-sizing: border-box;
}

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

#container {
  background-color: green;
}

#topNav {
  height: 65px;
  background-color: red;
}

#sideNav {
  width: 200px;
  float: left;
  background-color: green;
  height: 100%;
}

#content {
  background-color: blue;
  display:inline-block;
  width: calc(100% - 200px)
}

div {
  text-align: center;
  color: gold;
}

<div id="container">
  <div id="topNav">
     Top Nav
  </div>
  <div id="sideNav">
     Side Nav
  </div>
  <div id="content">
    <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>
    <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>
    <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>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>

侧边栏的背景实际上是容器的背景，使它看起来像它一样。

这就是我使用 JS 的方式：

var sidebar = document.getElementById('sideNav');
var contentHeight = document.getElementById('content').offsetHeight + "px";

sidebar.style.height = contentHeight;

//Could you also write this in one line
//document.getElementById('sideNav').style.height = document.getElementById('content').offsetHeight + "px";

* {
  box-sizing: border-box;
}

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

#container {
  background-color: yellow;
}

#topNav {
  height: 65px;
  background-color: red;
}

#sideNav {
  width: 200px;
  float: left;
  background-color: green;
  height: 100%;
}

#content {
  background-color: blue;
  display:inline-block;
  width: calc(100% - 200px)
}

div {
  text-align: center;
  color: gold;
}

<div id="container">
  <div id="topNav">
     Top Nav
  </div>
  <div id="sideNav">
     Side Nav
  </div>
  <div id="content">
    <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>
    <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>
    <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>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>

Answer 2

您可以使用一个非常旧的方法“faux columns”的更新，使用背景渐变：background:linear-gradient(to right, green 200px, blue 200px); 其中绿色是从左边开始绘制的前 200 像素（作为侧边栏），然后蓝色接管：

#container {
  background-color: yellow;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#topNav {
  height: 65px;
  background-color: red;
}

#sideNav {
  width: 200px;
  position: absolute;
  top: 65px;
  bottom: 0;
  background-color: green;
}

#content {
  background-color: blue;
  position: absolute;
  top: 65px;
  bottom: 0;
  left: 200px;
  right: 0;
}

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background:linear-gradient(to right, green 200px, blue 200px);
}

div {
  text-align: center;
  color: gold;
}

<div id="container">
  <div id="topNav">
     Top Nav
  </div>
  <div id="sideNav">
     Side Nav
  </div>
  <div id="content">
    <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>
    <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>
    <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>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>