javascript - 如何在我的 div 中添加滚动条而不会炸毁我的网页

Question

我有一个非常简单的页面，它有页眉、页脚、正文和左右导航。所有这些共同构成一个 100% 宽度的漂亮矩形页面。所有使用 div 在 css 表中制作。我在正文中有 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;}

Answer 2

您需要重组页面以使其更好地流动，或者使用 {overflow-y: scroll} 强制滚动条并相应地调整宽度，以免布局中断。