Question

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

This pen会更准确地描述这种情况。您可以看到内容继续从#content div开始。如何获取它以便侧面导航和内容窗格继续用于页面的其余部分？

Answer 1

好的，这是一个有点hacky解决方案，但它的工作原理！如果你愿意使用JS，我会提供一个没有黑客的东西：

* {
  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

您可以使用非常旧方法的更新＆＃39; faux columns＆＃39;使用背景渐变：background:linear-gradient(to right, green 200px, blue 200px);其中绿色从第一个200px左侧的油漆（作为侧边栏）然后蓝色接管：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

3截面布局的动态高度

2 个答案: