Javascript 如何将滚动条添加到我的div中，而不使其破坏我的网页

我有一个真正简单的页面，有页眉、页脚、正文和左右导航。 它们一起构成了一个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%;
}

---

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

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

---

你可以把我们和HTML放在一起，这样我们就可以试着找出答案。你也可以显示HTML吗？

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