个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 15:11:54 24 4
gpt4 key购买 nike

编辑:添加: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;
}

如果我的表格有很多行，那么内容会超出页面并出现滚动条。但滚动条会发生这种情况:

Error image

我明白了，因为我已经绝对定位了元素并向其添加了一个 top，所以垂直滚动条已经移动了那个量。

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

  1. 滚动条来到内容元素
  2. 滚动条来到表体。

我可以通过将 display : block 添加到 tbody 来实现第二个，但它会严重破坏对齐。观察:

Blown up table

最佳答案

如果从内容 block 中删除 height: 100%;，滚动条会显示它的真实高度:

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

关于html - 垂直滚动条在绝对定位元素中消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18844301/

24 4 0
文章推荐： c++ - 为什么容器需要const
文章推荐： c++ - 创建一个将字符串常量返回给枚举的类的廉价方法，反之亦然？
文章推荐： java - 使用 ajax 将数据发布到 Jax-RS
文章推荐： css - 手机网站设计用rem可以吗
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com