左右导航不粘

Question

我有一个布局，我指定了左右导航。左右导航应该有position:sticky。但由于某种原因，它并没有坚持下去。

* {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 80px;
  background-color: #fcc;
  z-index: 100;
}

main {
  padding-top: 80px;
  position: relative;
}

main::after {
  content: "";
  clear: both;
}

.left {
  float: left;
  position: sticky;
  top: 0;
  width: 230px;
  background-color: #ccf;
  height: 400px;
}

.content {
  float: left;
  width: calc(100% - 490px);
  height: 1500px;
  background-color: #ccc;
}

.right {
  float: right;
  position: sticky;
  top: 0;
  background-color: #cfc;
  height: 300px;
  width: 260px;
}

<header>
  Some header
</header>
<main>
  <nav class="left">
    Some links
  </nav>
  <div class="content">
    Some content
  </div>
  <nav class="right">
    Some more lnks
  </nav>
</main>

如果你想在CodePen中使用它，这里是CodePen link。

Answer 1

* {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 80px;
  background-color: #fcc;
  z-index: 100;
}

main {
  padding-top: 80px;
  position: relative;
}

main::after {
    content: "";
    clear: both;
    display: table;
}


.left {
  float: left;
  position: sticky;
  top: 0;
  width: 230px;
  background-color: #ccf;
  height: 400px;
}

.content {
  float: left;
  width: calc(100% - 490px);
  height: 1500px;
  background-color: #ccc;
}

.right {
  float: right;
  position: sticky;
  top: 0;
  background-color: #cfc;
  height: 300px;
  width: 260px;
}

<header>
  Some header
</header>
<main>
  <nav class="left">
    Some links
  </nav>
  <div class="content">
    Some content
  </div>
  <nav class="right">
    Some more lnks
  </nav>
</main>

您需要将display属性添加到伪后元素。

main::after {
    content: "";
    clear: both;
    display: table;
}

添加此css并试一试。