Question

我在这个布局上遇到了麻烦，一切看起来都不错，但是页面更加正确，只有空白。我尝试了一切无效。

.container.open-sidebar {
  position: relative;
  left: 240px;
}

#sidebar ul li a {
  padding: 15px 20px;
  height: 100%;
  font-size: 16px;
  font-weight: 100;
  color: white;
  background: #1a1a1a;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #1a1a1a;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

.main-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: relative;
}

HTML：

<div class="container open-sidebar">
  <div id="sidebar">
    content
  </div>
</div>

这是迫使问题的原因。这是第一个div，然后一切从左边移动，在右边做一个空白区域。

我该如何解决这个问题？谢谢

Answer 1

您正在使用此规则

.container.open-sidebar {
  position:relative;
  left: 240px;
}

将DIV 240px向右移动，但它的宽度仍为100％，因此它会将右侧父容器的宽度扩展240px。

如果您添加width: calc(100% - 240px);，则应解决您的问题。

页面宽度不必要滚动

1 个答案: