Question

我目前正在开展一个项目，在这个项目中我遇到了一个小问题，我无法找到一个好的解决方案。

那么这个想法是什么：你有一个导航栏固定的东西。您需要在其中滚动，当您单击按钮时，中间的内容会在导航栏外部的一小部分向右移动。

起初我以为我只是添加

  overflow-y: auto;

到我的导航栏但显然这不起作用并剪辑所有内容。

我已经创建了一个codepen来显示我的问题。

http://codepen.io/denniswegereef/pen/VjQBXA

Answer 1

看起来是因为你试图设置高度以匹配窗口，但你也有一些填充。您可以使用box-sizing:border-box使填充包含在指定的高度中。

var $item = $('.item'),
  $button = $('.button');

for (i = 0; i < 200; i++) {
  $item.append(i + '<br>')
}

$button.on("click", function() {
  $item.toggleClass('addMargin');
});

.sidenav {
  width: 300px;
  background-color: grey;
  position: fixed;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.addMargin {
  margin-left: 60px;
}
.item {
  transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22);
  width: 100%;
  background-color: orange;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="sidenav">
  <button class="button">test</button>
  <div class="item">
  </div </div>

修复了右侧的导航栏内容

1 个答案: