javascript - 如何在不破坏我的网页的情况下向我的 div 添加滚动条

Question

我有一个非常简单的页面，它有页眉、页脚、正文以及左右导航。所有这些一起构成了一个漂亮的矩形页面，即 100% 的宽度。全部使用 css 表中的 div 制作。我在正文中有 20 个图像缩略图，当调整页面大小时，它们会将我的页脚推到不合适的位置。要解决此问题，我想向 body div 添加一个滚动条。我已经用 overflow-y: auto 完成了这个；然而，添加滚动条似乎在主体的右侧增加了一些空间，迫使它被放置在左右导航栏的下方，这会破坏一切。请帮忙。

#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
    margin-left: 10%;
width:  80%; 
color:  blue;
height: 400px;
background-color:  #F8883C; 
border: 2px dashed #F8AA3C;
    overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%; 
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement { 
float: right;
width: 10%; 
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}

Answer 1

因为滚动条不在div的宽度之内，但仍然占空间，所以需要给它一些空间或者负边距。我猜测 IE 的宽度为 18 像素，并且由于您不能在 IE 中设置它，所以这必须是您的默认设置。

::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}