Javascript CSS跨浏览器更改布局

当我尝试使用其他浏览器时，我的CSS设计有问题：

到目前为止，我是在

左侧栏和内容适合浏览器屏幕

但是当我试着

我试图删除内容并变成这样（没有滚动，但仍有一些空格）：

设计改变了，我不知道为什么会发生这种情况，因为我只是开始尝试CSS设计，没有任何经验：（有人能帮我解决这个问题吗

编码：

#containerLeft
{
    z-index: -1;
}

#leftcolumn {

    height:100%;
    background-repeat:none;
    z-index:100;
}
.bottom {
    margin: none;
    width: 180px;
    height: 17px;
}
ul {
    background-image: url(SlicingImage/action_bar.jpg);
    background-repeat:no-repeat;
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    position: left;
    float:left;
}
li {
    list-style:none;
    background-repeat:repeat-y;
}
.separator {
    background-image:url(SlicingImage/separator.png);
    background-position:center;
    width:171px;
    /*select your width */
    height:5px;
    /*select your height */
    margin-left:auto;
    margin-right:auto;
}
.buttons {
    display:block;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color:#FFF;
    background-image:url(SlicingImage/button_unselect.png);
    margin: none;
    height: 53px;
    width: 180px;
    text-transform:uppercase;
    text-align:center;
    position:relative;
    line-height:53px;
}

HTML

---

尝试在主体样式中添加此选项

margin:0px; padding:0px;

---

您已经要求leftColumn div的高度为100%，如果它或主体有任何边距或填充，它将占据100%以上的空间，并且需要滚动条

body, div  {
    margin: 0px;
    padding: 0px;
}

---

我建议使用a来减少此类问题

你能告诉我你为你的主体标记写了什么样式吗？尝试包括css重置。这将使用eric meyer reset.css规范化你的页面在不同浏览器中的外观，效果很好，但如果我尝试了该链接，请再次更改我的设计…从我看到的情况来看，我认为我的内容（右栏）这降低了，不是我的操作栏，但我不确定再次..chrome的输出仍然相同：（旁注：0在CSS中没有单位。无需在

0

之后添加

px

尝试将此样式添加到主div--overflow-y:hidden！重要；overflow-x:auto！重要；

margin:0px; padding:0px;

body, div  {
    margin: 0px;
    padding: 0px;
}