Содержимое HTML Fieldset переполняется на высоте 100% (Chrome) - PullRequest
Новая
       22

Содержимое HTML Fieldset переполняется на высоте 100% (Chrome)

4 голосов
/ 16 мая 2011

У меня проблема с элементом HTML fieldset в Chrome.

Я хочу иметь фиксированную высоту fieldset, а внутри нее прокручиваемый div. Все выглядит нормально, пока я не вставлю legend - когда я это сделаю, 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>

Screenshot

Ответы [ 3 ]

1 голос
/ 16 мая 2011

Другое решение, если вам не нужно использовать элемент 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>

1 голос
/ 10 апреля 2014

Мне удалось заставить его работать, добавив 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.

0 голосов
/ 16 мая 2011

Я вижу переполнение.

Похоже, что fieldset div имеет слишком большую высоту.Попробуйте 

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

У меня работает в Chrome.

Конечно, без кода для легенды я не уверен, есть ли другие проблемы.

...