html - 两列(均可滚动)布局在不同的浏览器中搞砸了

Question

我有一个两列布局，这样每一列都可以单独滚动。问题是每列的宽度在 firefox 和 chrome 之间完全困惑。 Firefox 的列宽度比 chrome 少 40px，这导致了问题。我是 css html 的新手，请帮助我:

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    font-family: arial;
    position: relative;
}

#toolbar {
    width: 100%;
    background: #333;
    color: #F3F3F3;
    padding: 10px 20px;
    height: 38px;
}
#content {
    position: absolute;
    top: 38px;
    left: 0;
    bottom: 0;
    right: 0;
}

#content #left-section {
    position: absolute;
    background: rgb(29, 29, 29);
    left: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    width:40%;
    padding: 15px;
}
#content #right-section {
    position: absolute;  
    background: rgb(231, 231, 231);  
    padding:15px;
    width:58%;
    right: 0;  top: 0;  bottom: 0;  overflow: auto;  };
}

这是 HTML 框架:

 <div id="wrapper">
       <div id="toolbar">
       </div>
       <div id="content">
            <div id="left-section">
            </div>
            <div id="right-section">
            </div>
       </div>
    </div>

Answer 1

我想我发现了一个问题:

content {
    position: absolute;
    top: 38px;
    left: 0;
    bottom: 0;
    right: 0;
}

我认为你必须这样做:

#content {
...