HTML Fieldset内容溢出100％高度(Chrome)

2023年4月19日 217次阅读

我在Chrome中的
HTML fieldset元素有问题.

我想要一个固定高度的fieldset,并在其中有一个可滚动的div.一切都看起来很好,直到我把一个传说 – 当我这样做时,div从字段集的底部溢出.我也检查了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>

最佳答案 如果您不需要使用图例元素,另一种解决方案是适当地使用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>
点赞