css - 固定左侧导航+剩余空间

Question

我正在尝试使用 CSS 实现以下目标: 我想要一个固定的侧边栏带导航，以便在向下滚动时，侧边栏会留在其位置。右边的剩余空间应该用我的内容填充，好像它是100％的 body 。

但是，我的问题是右边的部分正好多了 300px 的空间，导致水平滚动条。

我自己找不到解决方案，有人可以帮助我吗？多谢! :)

JSFIDDLE:http://jsfiddle.net/ALGpP/4/

nav {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index:99;
}

#wrapper {
    overflow: hidden;
    position: absolute;
    width: 100%;
    margin-left:300px;
}

Answer 1

Do you mean something like this?

我给 #wrapper 元素一些新的 CSS 属性:

  height: 1200px;
  background-color: red;

• height: 1200px 在这种情况下只是为了测试，使页面更长。
• background-color: red 也只是为了测试让它更显眼。

我为您的 nav 元素提供了以下 css 属性:

  height: 100%;
  width: 20%;
  position: fixed;
  background-color: green;

• height: 100% 用于让元素在高度上填满页面
• width: 20% 用于使其宽度为 20%。
• position: fixed是让元素固定在页面的某个点。
• background-color 用于测试，因此您可以更清楚地看到自己在做什么。

---

此外，我建议使用 CSS 重置。这是我在 fiddle 中使用的一个非常简单的方法:

* {
    margin: 0;
    padding: 0;
}

它基本上会选择所有元素并为其提供 margin 和 padding 0。

---

如果您希望 nav 元素的宽度为 300px，请使用 this fiddle .

---

修复未显示的内容

将以下属性添加到您的 #wrapper 元素:

width: calc(100% - 300px);
float: right;

所以看起来像这样:

#wrapper {
    width: calc(100% - 300px);
    height: 1200px;
    background-color: red;
    float: right;
}

Demo here