Fatal编程技术网
  • html/
  • Html 垂直滚动条在绝对定位元素中消失

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

html css

Html 垂直滚动条在绝对定位元素中消失,html,css,css-position,Html,Css,Css Position,编辑：添加： 我的Html的结构如下： <body> <div class="wrapper"> <div class="left">left bar</div> <div class="right"> <div class="topbar">topbar</div> <div class="header">

编辑：添加：

我的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>
如果我的表有很多行，则内容超出页面，并显示一个滚动条。。但这就是滚动条发生的情况：

我理解，因为我已经完全定位了元素，并在其上添加了一个
top
，所以垂直滚动条已经移动了该数量

我想要两种解决方案中的一种：

  • 滚动条指向content元素
  • 滚动条来到了表体
    • 我可以通过在
    tbody
    中添加一个
    display:block
    来实现第二个功能，但是它会严重破坏对齐。注意：

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

    如果删除
    高度：100%从内容块中，滚动条显示其实际高度：
    

    删除CSS属性：“高度：100%”for“.content”
    
我认为您应该在浏览器中使用调试器工具。Firebug for mozilla和Chrome可以使用默认的调试器工具。希望你下次也能更好的解决你的问题
    

    干杯。
    jsidle还是CodePen？请将宽度从100%减少到98%左右，然后你会看到滚动条。@C-Link:你是说高度吗？但这是一个黑客。需要通过js来完成。
    body{min height:100%；}
    ？删除
    。右{bottom:0；}
    ？老实说，我真的需要一把小提琴。好吧。。制作一个。提供的css就是网站上添加的JSFIDLE，感谢上帝。就这样，谢谢。。我已经得到了答案。我确实使用开发工具，而开发工具不会告诉我在哪里解决问题。

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