Question

我有一个简单的Web应用程序（在此处找到：My Web Application），其中设置了固定的侧边栏菜单，该菜单部分由页面内容覆盖。该应用程序还有一个固定的标题，其中包含＆＃34;汉堡包＆＃34;单击时显示侧边栏其余部分的图标。

页面的HTML组成如下：

<body>
    <input type="checkbox" id="sidebartoggler" name="" value="" />

    <div class="page-wrap">

        <nav id="navbar">
            <label for="sidebartoggler" class="toggle">
                ≡
            </label>
        </nav>

        <div class="page-content">
            @RenderBody()
        </div>

        <div class="sidebar">
            <ul>
                <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li>
                <li><a href="#"><i class="fa fa-info-circle"></i> <span>About</span></a></li>
                <li><a href="#"><i class="fa fa-envelope-square"></i> <span>Contact</span></a></li>
            </ul>

        </div>
    </div>
</body>

CSS如下：

html, body, .page-wrap {
  width: 100%;
  height: 100%;
}

.page-content {
  position: relative;
  top: 45px;
  left: 55px;
  padding: 10px;
  -webkit-transition: .5s;
  transition: .5s;
  z-index: 1;
  background: #eee;
  height: 100%;
}

#navbar {
  height: 45px;
  width: 100%;
  position: fixed;
  background: black;
  z-index: 2;
}

.toggle {
  text-decoration: none;
  font-size: 30px;
  color: white;
  position: fixed;
  top: 0px;
  left: 20px;
  cursor: pointer;
  z-index: 3;
}

.sidebar {
  position: fixed;
  top: 45px;
  right: 0px;
  left: 0px;
  bottom: 0;
  height: 100vh;
  width: 160px;
  padding: 10px;
  background: #333;
  z-index: 0;
}
.sidebar ul {
  margin: 0;
  margin-top: 50px;
  padding: 0;
  list-style: none;
}
.sidebar ul a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  margin-bottom: 16px;
  -webkit-font-smoothing: antialiased;
}
.sidebar ul a i {
  padding: 10px;
}
.sidebar ul a:hover {
  color: white;
}

#sidebartoggler {
  display: none;
}
#sidebartoggler:checked + .page-wrap .page-content {
  left: 180px;
  transition: .5s;
}

现在，侧边栏无限延伸到底部，因为我已使用position: fixed;和bottom: 0;进行设置，这很漂亮。按钮可以正常工作。页面内容可以按原样上下滑动。但是在主页上，当您向下滚动但是，您会看到页面内容的背景突然变得透明。

现在，在我添加html，body和page-wrap的行之前，我需要height和width 100%联系页面＆＃39;内容背景在内容结束的地方结束，这是有道理的。然后在将StackOverflow精练数小时后，我添加了该行并将height: 100%;添加到page-content。它解决了关于和内容的问题，并将其背景一直延伸到底部，但它打破了主页，一旦你滚动到页面底部的位置，当它加载时你看到它没有任何东西左背景（你看到的身体背景）。

此外，如果您使用的是OS X，即使是在“关于”和“联系”页面上，如果您滚过边缘（强迫它滚动到可能的位置），您也可以清楚地看到{ {1}}不会四处延伸。

以下是一些显示我正在谈论的内容的图片：

主页（某一点后的透明背景）：

联系页面（在添加div之前）：

和联系页面（后）：

这就是问题所在。我想知道的是，如果有办法解决这个问题，那么我可以为这个div提供一个无缝的背景，它一直延伸到底部甚至顶部（我不介意做{{1}如果它是它需要的那个）。并且不会失去颜色（无论如何都是这样）。如果有一个黑客攻击，我很乐意尝试它，只要它有效并且不会破坏。

为什么页面内容Div不会一直延伸

0 个答案: