HTML 字段集内容在 100% 高度溢出 (Chrome)

发布于 2024-11-07 16:47:00 字数 1089 浏览 0 评论 0原文

我在 Chrome 中遇到 HTML fieldset 元素问题。

我想要一个固定高度的 fieldset，并在其中有一个可滚动的 div。一切看起来都很好，直到我放入图例 - 当我这样做时，div从fieldset的底部溢出。我还检查了 Firefox，它没有这样做（即完全符合我的预期）。

还有其他人看到这个吗？这是 Chrome 的错误吗？有人知道这是否有黑客吗？

<!DOCTYPE HTML>
<html>
    <head>
        <title>a</title>
        <style>
            fieldset {
                height: 80px;
            }
            fieldset div {
                height: 100%;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>Test</legend>
            <div>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
            </div>
        </fieldset>
    </body>
</html>

屏幕截图

原文

I have a problem with the HTML fieldset element in Chrome.

I want to have a fixed-height fieldset, and within it a scrollable div. Everything looks fine until I put a legend in - when I do so, the div spills out from the bottom of the fieldset. I also checked in Firefox, and it does not do this (i.e. does exactly what I would expect).

Anyone else seeing this? Is it a Chrome bug? Anyone know if there is a hack for this?

<!DOCTYPE HTML>
<html>
    <head>
        <title>a</title>
        <style>
            fieldset {
                height: 80px;
            }
            fieldset div {
                height: 100%;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>Test</legend>
            <div>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
            </div>
        </fieldset>
    </body>
</html>

Screenshot

分享到QQ

分享到微博

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

发布评论

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

放血 2024-11-14 16:47:00

如果您不需要使用 legend 元素，另一个解决方案是使用 h1 并适当设置样式。这对我来说在 Chrome 和 FF 中都有效。

<!DOCTYPE HTML>
<html>
<head>
    <title>a</title>
    <style>
        fieldset {
            height: 80px;
        }
            h1 {
                margin:0;
                margin-top:-1em;
                font-size:1em;
                background:white;
                width:33px;
            }   
        fieldset div {
            height: 100%;
            overflow-y: scroll;
        }

    </style>
</head>
<body>
    <fieldset>
        <h1>Test</h1>
        <div>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
        </div>
    </fieldset>
</body>

Another solution, if you do not need to use the legend element, is to use an h1 and style appropriately. This works for me in both Chrome and FF.

<!DOCTYPE HTML>
<html>
<head>
    <title>a</title>
    <style>
        fieldset {
            height: 80px;
        }
            h1 {
                margin:0;
                margin-top:-1em;
                font-size:1em;
                background:white;
                width:33px;
            }   
        fieldset div {
            height: 100%;
            overflow-y: scroll;
        }

    </style>
</head>
<body>
    <fieldset>
        <h1>Test</h1>
        <div>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
        </div>
    </fieldset>
</body>

回复收藏 0 原文

只为守护你 2024-11-14 16:47:00

我可以通过将 padding-bottom 添加到仅适用于 Chrome 的字段集来使其正常工作。这平衡了一些额外的高度%。这是很好的，因为即使在调整大小时它也能工作（相对一致）。

if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
    $('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}

顺便说一句，我发现这至少在 IE8 - IE11 中也是一个问题，因此该修复可以应用于 IE。

I was able to get it working by adding padding-bottom to the fieldset for Chrome only. This balances out some of the extra height %. It's nice in that it works (relatively consistently) even when resizing.

if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
    $('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}

Just as a note, I found this to be an issue in at least IE8 - IE11 as well, so the fix can be applied to IE.

回复收藏 0 原文

如果没结果 2024-11-14 16:47:00

我看到溢出了。

看起来好像 fieldset div 应用了太多的高度。尝试

fieldset div {
            height: 85%;
            overflow-y: scroll;
        }

在 Chrome 中使用 Works for me。

当然，如果没有图例的代码，我不确定是否还有其他问题。

I see the overflow.

It looks as if the fieldset div has too much height applied to it. Try

fieldset div {
            height: 85%;
            overflow-y: scroll;
        }

Works for me in Chrome.

Of course, without the code for the legend, I am not sure if there are other issues.

回复收藏 0 原文

~没有更多了~

关于作者

去了角落

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

HTML 字段集内容在 100% 高度溢出 (Chrome)

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

HTML 字段集内容在 100% 高度溢出 (Chrome)

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

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