Geek Answers Handbook

HTML Field Overflow Content at 100% Height (Chrome)

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

I want to have a fixed fieldset height, and inside it is a scrollable div . Everything looks fine until I pasted legend in - when I do this, the div will exit the bottom of the fieldset . I also checked in Firefox, and it does not do this (i.e., it does exactly what I expect).

Does anyone else see this? Is this a Chrome bug? Does 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>

Screen shot

+4
source share
3 answers

Another solution, if you do not need to use the legend element, is to use h1 and style, respectively. 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>

+1
source

I managed to get it working by adding padding-bottom to the Chrome-only fieldset. This balances some additional height%. It's good that it works (relatively consistently) even when resized.

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

As a note, I found that this is a problem at least in IE8 IE11, so the fix can be applied to IE.

+1
source

I see an overflow.

It looks like the fieldset div is too tall. Try

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

Works for me in Chrome.

Of course, without the code for the legend, I'm not sure if there are other problems.

0
source

More articles:


All Articles