固定左侧导航+剩余空间

Question

我正在尝试使用 CSS 实现以下目标： 我想要一个带有导航的固定侧边栏，这样当您向下滚动时，侧边栏会留在原位。右边的剩余空间应该被我的内容填满，就好像它是 100% 的正文一样。

但是，我的问题是右侧部分在右侧多占用了 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 重置。这是我在小提琴中使用的一个非常简单的方法：

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