HTML Fieldset content overflows at 100% height (Chrome)

问题

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>

回答1:

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>

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/6018760/html-fieldset-content-overflows-at-100-height-chrome

标签

html

css

google-chrome

fieldset