Question

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

然而，我的问题是右边的部分在右边的空间增加了300px，导致水平滚动条。

我不能自己解决问题，任何人都可以帮助我吗？非常感谢！：）

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

修正左侧导航+剩余空间

1 个答案: