[英]Margin/width not rending properly on a div element position: fixed; display: table-cell; set
I need my .nav-container position: fixed; 我需要我的.nav-container职位:固定; so that content doesn't move on scrolling up or down.
因此内容不会在向上或向下滚动时移动。 But doing this creates a gap between the .nav-container and the .page-content, a certain window widths.
但是这样做会在.nav容器和.page-content之间(一定的窗口宽度)之间产生间隙。 At these widths there appears to be a small white line between the red background of the .nav-container and the brown border to its right.
在这些宽度下,.nav容器的红色背景与其右侧的棕色边框之间似乎有一条小的白线。
If I get rid of the position: fixed; 如果我摆脱这个职位:固定; the margins render perfectly but I need that content fixed.
边距呈现完美,但是我需要固定该内容。
Does anyone know of a work around? 有人知道解决方法吗?
Would it best / possible to leave off the position: fixed; 最好/可能放弃该职位:固定; and use Javscript to move all the content in the .nav-container down and up as the window scrolls so that it appears the content is not moving at all?
并使用Javscript在窗口滚动时上下移动.nav-container中的所有内容,以使内容看起来根本没有移动?
live link: https://webzume.herokuapp.com/ 实时链接: https : //webzume.herokuapp.com/
relevant css: 相关的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;}
Never use table formatting for layout! 切勿使用表格格式进行布局! Especially not in combination with position!
特别是不能与位置结合使用!
Heres how to fix it without the table layout: 以下是在没有表格布局的情况下如何解决此问题的方法:
display: table
from #content
display: table
#content
display: table
display: table-row
from #index
display: table-row
#index
display: table-row
position: fixed
from #index .nav-container
position: fixed
从#index .nav-container
position: fixed
On both #index .nav-container
and #index .page-content
, do the following: 在
#index .nav-container
和#index .page-content
,执行以下操作:
display: table-cell
display: table-cell
float: left
float: left
height: 100%
height: 100%
overflow: auto
overflow: auto
Have you set page Margin and Padding to zero? 您是否将页面边距和填充设置为零?
html, body { margin:0; html,正文{margin:0; padding:0;
填充:0; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.