垂直滚动条消失在绝对定位的元素中
Varun achar
编辑：添加：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因此垂直滚动条已移动了该数量。
我想要2个解决方案之一：
- 滚动条显示在content元素上
- 滚动条进入表主体。
我可以通过添加来实现第二个display : block，tbody但随后会严重破坏对齐方式。观察：
帕特里克·G
如果height: 100%;从内容块中删除，滚动条将显示其实际高度：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何防止绝对定位的元素影响滚动条？
- 2
防止{overflow-y：auto} div中绝对定位的元素触发滚动条
- 3
身体上/左视口外的绝对定位元素的视图滚动条
- 4
滚动条消失了
- 5
从底部绝对定位不创建溢出滚动条
- 6
文本（绝对）不会通过垂直滚动条
- 7
文本（绝对）不会通过垂直滚动条
- 8
单击取消按钮时，ngSweetAlert垂直滚动条消失
- 9
单击取消按钮时，ngSweetAlert垂直滚动条消失
- 10
Jekyll Rouge中的垂直滚动条
- 11
定位元素时考虑滚动条的宽度
- 12
在滚动条上动态定位元素
- 13
在滚动条上动态定位元素
- 14
删除垂直滚动条
- 15
iframe滚动条在Mac上的Chrome中消失
- 16
在Div中的段落中添加垂直滚动条
- 17
在Div中的段落中添加垂直滚动条
- 18
extJs中Itemselector中的垂直滚动条
- 19
QScrollArea：垂直滚动条引起的水平滚动条
- 20
如何始终在SWT表中显示垂直滚动条？
- 21
PyDev中的经典垂直滚动条在哪里？
- 22
IE 10 11中的垂直滚动条
- 23
面板中的垂直和水平滚动条
- 24
分组的WPF ListBox中缺少垂直滚动条
- 25
删除jquery-mobile中的垂直滚动条
- 26
如何在小部件中添加垂直滚动条？
- 27
SplitContainer中的顶部ListView不会添加垂直滚动条
- 28
如何在tabcontrol / tabpages中添加垂直滚动条
- 29
在WPF中设计样式的垂直滚动条
我来说两句