基于 CSS DIV 的表格，带有标题和有限高度，必要时显示滚动条 - 百分比高度

发布于 2024-12-19 14:07:43 字数 2481 浏览 2 评论 0原文

我到处搜索，找不到专门针对这个问题的解决方案。我正在尝试完成以下任务：

使用百分比高度定义容器 DIV 以用作最大尺寸容器
提供基于内容大小的边框的辅助容器 DIV
有一个固定在该 DIV 顶部的标题 div
在标题下有一个 DIV 列表（类似表格）
当列表很短时，边框会缩小到内容的大小
当列表很长（> 外部容器的高度）时，会为 DIV 列表而不是标题显示滚动条。

我整理了以下简化版本：

<html>
    <head>
        <style type="text/css">
            .panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
            .sizer { max-height: 100%; border: 1px solid blue; }
            .header { border-bottom: 1px solid black; }
            .scroll { max-height: 100%; overflow: auto; }
        </style>
    </head>
    <body>
        <div class="panel">
            <div class="sizer">
                <div class="wrap">
                    <div class="header">Header</div>
                    <div class="scroll">
                        <div>Line1</div>
                        <div>Line2</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="sizer">
                <div class="wrap">
                    <div class="header">Header</div>
                    <div class="scroll">
                        <div>Line1</div>
                        <div>Line2</div>
                        <div>Line3</div>
                        <div>Line4</div>
                        <div>Line5</div>
                        <div>Line6</div>
                        <div>Line7</div>
                        <div>Line8</div>
                        <div>Line9</div>
                        <div>Line10</div>
                        <div>Line11</div>
                        <div>Line12</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

两个红色框应该是固定大小的。检查
蓝色框的大小应为内容的大小或红色框的最大大小。检查
当下部内容超过红框大小时，标题下方应显示滚动条。失败

我所做的任何显示滚动条的更改都会导致顶部蓝色框放大到其容器红色框的大小。例如，{ .scroll height: 100% }

（DIV.wrap 确实有一个目的 - 只是不在本例中。它的目的是在 sizer 上提供双边框效果，因此它应该与 sizer all 的大小相同时间）。

另外，我已经找到了一些解决方案，其中我对 DIV 使用固定 (px) 大小，但这不一定是所需的。特别是在 DIV.panel 上 - 必须将其设置为百分比高度。

原文

I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:

Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.

I put together the following simplified version:

<html>
    <head>
        <style type="text/css">
            .panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
            .sizer { max-height: 100%; border: 1px solid blue; }
            .header { border-bottom: 1px solid black; }
            .scroll { max-height: 100%; overflow: auto; }
        </style>
    </head>
    <body>
        <div class="panel">
            <div class="sizer">
                <div class="wrap">
                    <div class="header">Header</div>
                    <div class="scroll">
                        <div>Line1</div>
                        <div>Line2</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="sizer">
                <div class="wrap">
                    <div class="header">Header</div>
                    <div class="scroll">
                        <div>Line1</div>
                        <div>Line2</div>
                        <div>Line3</div>
                        <div>Line4</div>
                        <div>Line5</div>
                        <div>Line6</div>
                        <div>Line7</div>
                        <div>Line8</div>
                        <div>Line9</div>
                        <div>Line10</div>
                        <div>Line11</div>
                        <div>Line12</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail

Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }

(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).

Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹沉浮 2024-12-26 14:07:43

不完全确定我理解这个问题，但是如果您想要滚动在列表上而不是在标题上，您是否尝试过：

overflow-y:scroll;

在“滚动”div 上而不是

overflow:auto?

让我知道

Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:

overflow-y:scroll;

on the "scroll" div instead of

overflow:auto?

Let me know

回复收藏 0 原文

蛮可爱 2024-12-26 14:07:43

好吧，我想也许我已经解决了。我认为是因为容器 div 上有溢出：隐藏和高度，而不是可变滚动 div。只需尝试下面的代码并告诉我。我已将 10% 的高度添加到滚动 div 而不是整个容器。希望这就是您正在寻找的

<html>
<head>
    <style type="text/css">
        .panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
        .sizer { max-height: 100%; border: 1px solid blue;  display:block;}
        .header { border-bottom: 1px solid black; }
        .scroll { height: 10%;overflow-y: scroll; display:block; }
        .scroll div {display:block; line-height:normal; clear:both; height:20px;}
    </style>
</head>
<body>
    <div class="panel">
        <div class="sizer">
            <div class="wrap">
                <div class="header">Header</div>
                <div class="scroll">
                    <div>Line1</div>
                    <div>Line2</div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="sizer">
            <div class="wrap">
                <div class="header">Header</div>
                <div class="scroll">
                    <div>Line1</div>
                    <div>Line2</div>
                    <div>Line3</div>
                    <div>Line4</div>
                    <div>Line5</div>
                    <div>Line6</div>
                    <div>Line7</div>
                    <div>Line8</div>
                    <div>Line9</div>
                    <div>Line10</div>
                    <div>Line11</div>
                    <div>Line12</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for

<html>
<head>
    <style type="text/css">
        .panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
        .sizer { max-height: 100%; border: 1px solid blue;  display:block;}
        .header { border-bottom: 1px solid black; }
        .scroll { height: 10%;overflow-y: scroll; display:block; }
        .scroll div {display:block; line-height:normal; clear:both; height:20px;}
    </style>
</head>
<body>
    <div class="panel">
        <div class="sizer">
            <div class="wrap">
                <div class="header">Header</div>
                <div class="scroll">
                    <div>Line1</div>
                    <div>Line2</div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="sizer">
            <div class="wrap">
                <div class="header">Header</div>
                <div class="scroll">
                    <div>Line1</div>
                    <div>Line2</div>
                    <div>Line3</div>
                    <div>Line4</div>
                    <div>Line5</div>
                    <div>Line6</div>
                    <div>Line7</div>
                    <div>Line8</div>
                    <div>Line9</div>
                    <div>Line10</div>
                    <div>Line11</div>
                    <div>Line12</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

回复收藏 0 原文

~没有更多了~