How to set the last inner div to fill the rest of the wrapper height with CSS?


Tags: javascript,css,html,height

Problem :


I would like to create a wrapper div that contains 2 inner divs so that the wrapper and the first inner divs will have a fixed height and the second inner div will fill the rest of the wrapper height.
I have done something like this:

<div class="frameArea">
   <div class="header"></div>
   <div class="frame"></div>
</div>

My CSS file looks like this:

.frameArea {
   width: 200px;
   height: 300px;
   border: 2px solid black;
}
.frameArea .header {
   background-color: green;
   width: 100%;
   height: 25px;
   font-size: 18px;
   line-height: 25px;
}
.frameArea .frame {
   background-color: white;
   width: 100%;
   height: 100%;
}

The thing is, that using this CSS making the .frame div to be 100% of the wrapper's height, which means he will be 300px instead of what i'm looking for - 275px (in this case when the wrapper is 300px and the .header is 25px).
One way I can do this by setting the height property of .frame using JS code that will calculate and set it dynamically when the document is ready, however I would like to ask if there is any CSS property that does the same in more elegant way?

Thanks!



Solution :

Using CSS calc()

.frameArea .frame {
    ...
    height: calc(100% - 25px);
}

DEMO

calc() is not compatible with older browsers and thus might give you compatibility problems, to overcome this I suggest you use JavaScript solution.

A jQuery Solution

var h = $('div.frameArea').height() - 25;
$('div.frame').height(h);

DEMO


    CSS Howto..

    How do I style HTML in a JEditorPane?

    how to embed css in sass, or use + selector in sass?

    How to clip the top bar with screen

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    Bootstrap - how to clear css from element to start over?

    How to override CSS :hover?

    How to add contact details next to responsive Google Map

    How to make a smoother animation with jQuery UI slide effect

    How does CSS3 flexbox negative-flex work?

    How to apply CSS directives to h3 element?

    ASP.NET MVC2 + CSS - how to refresh CSS?

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    How to prevent an absolutely positioned element to affect the scrollbar?

    How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

    How to assign CSS to mobile page in asp.net

    How to implement vertical tables using html5/CSS

    how to style the html contents inside a php include file?

    HTML/CSS - How to make text-overflow in line with each other?

    How to position a background image like wanderfly.com?

    How to Properly Add CSS in a MailMessage

    How to make my buttons responsive?

    How can I style the n-th div with CSS

    how to change single li element in a menu using lists?

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How do I select text after a

    tag, but before a nested tag?

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

    CSS: how to keep my text fixed wrt to window size?

    how to make header title with buttons

    DOMPDF - How to render PDF to have no margins at all?

    How to add Print headers and footers in HTML, CSS and JavaScript?