html - 如何保持侧边栏不可移动并在其父级内部？

Question

html,
body {
  margin: 0;
}

.container {
  width: 50%;
  margin: 0 auto;
  background: #eee;
}

.panel {
  width: calc(100% - 140px);
  background: lightblue;
  height: 100vh;
}

.sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 120px;
  height: 100vh;
  text-align: center;
  overflow-y: scroll;
  background: gold;
}

<div class='container'>
  <div class='panel'>
    <p>lorem</p>
    <p>ipsum</p>
    <p>lorem</p>
  </div>
  <div class='sidebar'>
    <p>info</p>
    <p>info</p>
    <p>info</p>
  </div>
</div>

两个问题:

• 为什么 parent 有上边距？
• 为什么 sidebar 在 parent 之外？

可能是position:fixed的缘故，但是有什么方法可以让侧边栏在页面上不可移动呢？

我需要修复它，因为它包含有关在左侧(面板)上单击的长列表项的重要信息。

在大显示器上，例如 1920px，sidebar 最右边，在 body 之外(最大 1360px)

我需要在 container 中保持固定但整洁。

Answer 1

1.) 顶部的边距很可能是由于默认的浏览器样式。通常浏览器会在 html 和/或 body 标签周围留一个边距。您可以通过以下方式重置:

html, body {
    margin: 0;
}

进入你的css文件。

2.) 请参阅this answer对于您的固定侧边栏超出容器的问题，因为这个问题已经被询问和回答。