我有两列布局,每个列可以单独滚动。问题是每列的宽度在firefox和chrome之间完全混乱。 Firefox在列中的宽度比铬的宽度少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>
答案 0 :(得分:0)
我想我发现了一个问题:
content {
position: absolute;
top: 38px;
left: 0;
bottom: 0;
right: 0;
}
我认为你必须这样做:
#content {
...