Geek asks and answers

Element with 100% height and overflow

What I basically need to achieve is to have an element (div, span, table, whatever) to consume 100% of its parent height and display scrolls if the content is taller.

The problem is that only Chrome and IE in quirks work fine with height:100%; overflow: auto;. Firefox, Opera and IE in standards (any IE 7+, any "standards") simply ignore overflow and stretch the html element below the parent size. If I set a fixed height, it works, but I cannot determine the available height before rendering, there are several possible values.

Simplified example ( jsFiddle for this ):

<body>
    <div id="parent">
        <table id='container'>
            <tr>
                <td>
                    <div id='element-in-question'>
                        <!--Content long enough to stretch the div-->
                    </div>
                </td>
            </tr>
            <tr>
            <td id='footer-cell'>
                <div id='footer'>I'm footer<div>
            </td>
            </tr>
        </table>
    </div>
</body>

Css:

#parent { height:500px; width:500px; position:absolute; }
#container { height: 100%; width:100%; }
#element-in-question { height:100%; width:100%; overflow: auto; }
#footer-cell { height:30px;}
#footer { height: 30px; }

iframe, .. , , 100+ , . CSS .

: Chrome, IE10. FF, Opera Safari , IE9 -.

: , .

+5
3

:

.

, height: 100%; . - . , , .

position: absolute;
top:5px; left:5px;
right: 5px;
bottom: 40px;
overflow: auto;
border: 1px solid green;
background-color: #eee;

td. , , , - , .

, , , :

  • .
  • ( .)
  • .

, ; , .

, javascript - , , jQuery, :

Fiddle

$('td > div').each(function() {
    var t = $(this);
    var text = t.html();
    t.hide();
    t.height(t.parent().height());
    t.show(text);
});

:

div , 100% , , , . . , jQuery div , . , ?

, . Divs , , . -, , td, div , td, , . , td, , , , , . , , div, , td 900 .

, ?

, div. , , . , td , .

TD, div, , , - , , .

Voila. div, . .

+4

HTML

, . , . .

, , .

3 :

  • . Chrome Safari ( Webkit).
  • , , , . Firefox Opera, IE7/8/9/10 - ( IE , , ).
  • , , . IE7/8/9/10 Quirks.

№ 3 ( ).

CSS-

CSS, , #element-in-question ( ) . , . , , .

CSS, , : (#element-in-question , ).

#parent { width:500px; position:absolute; }
#container { width:100%; }
#element-in-question { height:450px; width:100%; overflow: auto; }
#footer-cell { }
#footer { }

, , ( : IE7/8/9/10 Quirks, Firefox, Chrome, Safari, Opera). JSFiddle IE, .

-, , HTML-. (, ) , , JavaScript jQuery.

+2

I have a workaround for this. The tag is tbodyautomatically added in firefox and this causes a problem. Add height:100%to yours tdand height:90%to yours tbody. The tag tbodynever existed, so you must add it using css.

table tbody{height:90%}

Live demo

0
source

More articles:


All Articles