边距元素位置上的边距/宽度不正确：固定;显示：table-cell;组

Question

我需要我的.nav-container位置：固定;这样内容就不会向上或向下滚动。但这样做会在.nav-container和.page-content之间创建一个间隙，一定的窗口宽度。在这些宽度处，.nav容器的红色背景和右边的棕色边框之间似乎有一条小白线。<​​/ p>

如果我摆脱了这个位置：固定;边距完美呈现，但我需要修复内容。

有没有人知道一项工作？

最好/可能离开这个位置：固定;并使用Javscript在窗口滚动时向下和向上移动.nav容器中的所有内容，以便看起来内容根本不移动？

实时链接：https://webzume.herokuapp.com/

相关的css：

#content {
width: 100%;
display: table; }


#index {
  display: table-row; }

#index .nav-container { 
position: fixed; 
background-color: rgba(222, 89, 58, 0.95);
box-sizing: border-box;
padding-top: 2.5rem;
vertical-align: top;
width: 22.6%;
display: table-cell;}

Answer 1

永远不要使用表格格式进行布局！特别是不与位置相结合！

下面是如何在没有表格布局的情况下修复它：

1. 从display: table
移除#content
2. 从display: table-row
移除#index
3. 从position: fixed
移除#index .nav-container

在#index .nav-container和#index .page-content上，执行以下操作：

1. 删除display: table-cell
2. 添加float: left
3. 添加height: 100%
4. 添加overflow: auto

Answer 2

您是否将页边距和填充设置为零？

html，body {margin：0;填充：0; }