编辑：添加：http: //jsfiddle.net/bfNzH/1/
我的 HTML 结构如下：
<body>
<div class="wrapper">
<div class="left">left bar</div>
<div class="right">
<div class="topbar">topbar</div>
<div class="header">header</div>
<div class="content">
<div>..some stuff</div>
<table>
<thead>
<tr>
<th class="th1">Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
CSS
body {
height : 100%;
}
.wrapper {
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
overflow : hidden;
}
.left {
height : 100%;
position : absolute;
width : 50px;
overflow : hidden;
border-right : 1px solid black;
}
.right {
position : absolute;
top : 0;
left : 50px;
bottom : 0;
right : 0;
//border : 1px solid red;
}
.topbar {
height : 20px;
display : table;
width : 100%;
border-bottom : 1px solid green;
}
.header {
height : 30px;
display : table;
width : 100%;
}
.content {
width : 100%;
height : 100%;
position : absolute;
overflow : auto;
top : 50px;
bottom : 0px;
border-top : 1px solid yellow;
border-bottom : 1px solid yellow;
}
.th1 {
width : 50%;
}
table {
width : 100%;
}
th, tr {
text-align : center;
}
如果我的表格有很多行，则内容超出页面并出现滚动条..但这就是滚动条发生的情况：
我理解，因为我已经绝对定位了元素并添加了一个top，所以垂直滚动条已经移动了那个量。
我想要两种解决方案之一：
- 滚动条来到内容元素
- 滚动条来到表体。
display : block我可以通过添加一个to来实现第二个，tbody但它会非常糟糕地搞砸对齐。观察：
