html - 修复了右侧的导航栏内容

Question

我目前正在做一个元素，遇到了一个小问题，但找不到好的解决方案。

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

起初我以为我只是添加

  overflow-y: auto;

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

我创建了一个代码笔来展示我的问题。

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>