时间戳

首页 > 解决方案 > 导航仅在网站的前 100% 中推送文本

html - 导航仅在网站的前 100% 中推送文本

问题描述

我有一个小问题。

我制作了这个侧边栏导航（我还添加了一百万个“嘿”来显示问题）：

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

nav {
  height: 100vh;
  width: 250px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  float: left;
  position: sticky;
  top: 0;
  left: 0;
}

nav ul li i {
  font-size: 25px;
  margin-right: 5px;
}

nav ul li .arrow {
  font-size: 15px;
  text-align: right;
  width: 100%;
}

nav ul li {
  font-size: 20px;
  padding: 0.5em;
  color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
}

nav ul li:hover {
  color: rgba(0, 0, 0, 1);
  background: #F2F2F2;
  cursor: pointer;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap" rel="stylesheet"> 


<nav>
  <ul>
    <li><i class="bi bi-house-door"></i> Home</li>
    <li><i class="bi bi-envelope"></i> Messages</li>
  </ul>
</nav>

<p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p>

当您看到页面时，您会注意到导航在左侧，文本在右侧，但在页面高度的前 100% 之后，文本像这样向左移动（也在片段中按整页） ：

我该如何解决这个问题？如果您有不明白的地方，请在评论中问我

提前致谢，祝您有美好的一天！

标签： htmlcss

解决方案

将您p的容器放入容器中并应用margin-left等于 的宽度nav，即，在这里250px（这样它将仅应用于特定标签而不是全部）

.container {
  margin-left: 250px
}


* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

nav {
  height: 100vh;
  width: 250px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  float: left;
  position: fixed;
  top: 0;
  left: 0;
}

nav ul li i {
  font-size: 25px;
  margin-right: 5px;
}

nav ul li .arrow {
  font-size: 15px;
  text-align: right;
  width: 100%;
}

nav ul li {
  font-size: 20px;
  padding: 0.5em;
  color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
}

nav ul li:hover {
  color: rgba(0, 0, 0, 1);
  background: #F2F2F2;
  cursor: pointer;
}

.container {
  margin-left: 250px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap" rel="stylesheet">


<nav>
  <ul>
    <li><i class="bi bi-house-door"></i> Home</li>
    <li><i class="bi bi-envelope"></i> Messages</li>
  </ul>
</nav>

<div class="container">
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
  <p>Hey</p>
</div>

推荐阅读