HTML Fieldset content overflows at 100% height (Chrome)

 ̄綄美尐妖づ 提交于 2019-12-01 18:42:51

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>

Igor

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.

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!