Question

我的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;
}

如果我的表有很多行，那么内容会超出页面并显示滚动条..但滚动条会发生这种情况：

Error image

我理解，因为我已经绝对定位了元素并为其添加了top，因此垂直滚动条已经移动了这个数量。

我想要两种解决方案之一：

滚动条转到内容元素
滚动条进入桌面。

我可以通过向display : block添加tbody来实现第二个但是它会严重阻碍对齐。观察：

Blown up table

Answer 1

如果您从内容块中删除height: 100%;，则滚动条会显示其真实高度：

http://jsfiddle.net/bfNzH/4/

Answer 2

您是否检查了内容 div中的“溢出”属性，该属性可能设置为隐藏，并设置了特定的高度。

Answer 3

删除CSS属性：“height：100％”表示“.content”。

我认为您应该在浏览器中使用调试工具。适用于Mozilla和Chrome的Firebug，您可以使用默认的调试工具。希望你下次也能更好地解决你的问题。

干杯。

垂直滚动条在绝对定位的元素中消失

3 个答案: