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造成的，但是如何使侧边栏在页面上不可移动？

我需要对其进行修复，因为它包含有关在左侧（panel）上单击的长列表项的重要信息。

在大型监视器（例如1920像素）上，sidebar在body之外（最大1360像素）最右侧

我需要将其固定但在container内要整洁。

Answer 1

1。）由于默认的浏览器样式，顶部的页边空白很有可能。通常，浏览器会在html和/或body标签周围添加空白。您可以通过以下方法重置它：

html, body {
    margin: 0;
}

进入您的CSS文件。

2。）有关固定侧边栏超出容器范围的问题，请参见this answer，因为已经询问并回答了此问题。

如何使侧边栏不可移动并位于其父内部？

1 个答案: