CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?


Tags: html,css,height

Problem :

This seems like a really amateur question, in my opinion, but nonetheless it's still a frustrating anomaly.

This is actually the 2nd part of a 2 part problem. The first part is a rather common one, involving getting an element to stretch to 100% height of its parent object. In my demo, I have the following HTML:

<body>      
<div id="sbcontainer">
    DIV 1
    <div id="sbcontent">
        DIV 2
        <table id="sbmaintable" cellspacing="0">
            <tr>
                <td>
                    TABLE
                </td>
            </tr>
        </table> <!-- END MAINTABLE -->
    </div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>

I want each element here to fill all vertical space within its parent element. I tried used the following style on each of the elements (Please note that BODY and HTML are also set to 100% height in my demo):

min-height: 100%; 
height: auto !important; 
height: 100%; 

The result was as follows: enter image description here

As you can see, the outermost DIV followed the 100% height property but the rest did not. As implied in the image note, but not actually shown in this image, I tried setting the 2nd DIV (red border) to a static height of 400px to see if the TABLE within would stretch to 100% height, and it still did not.

I then found that if I removed height:auto; from each of the elements, they would follow the 100% height property, but with an unwanted side effect:

enter image description here

As you can see in the image, each element is now truly 100% the height of its parent element, forcing the bottom to extend beyond the boundaries of its parent. (Even in my first example, the outermost DIV with the green border extended farther than desired because there is another sibling DIV above it on the page). NOTE: After looking more carefully, I can see that the blue TABLE element is not actually the same height as its red DIV parent, but it still extends beyond its boundary. I'm not sure if this means anything, but I do notice it.

One would think that this would be an easy thing to solve, but despite my efforts, I've had no success.

If I keep only height:auto; and remove the 100% properties, this does not stretch them at all.

I have searched for solutions on this via Google and StackOverflow, and although many sites covered 100% height issues, I still haven't found an actual solution.

I am currently testing this in Firefox.



Solution :

You can use absolute positioning.

#b {
    width: 40em;
    height: 20em;
    position:relative;
    background: red;
}
#c {
    position: absolute;
    top: 1em;
    bottom: 1em;
    left: 1em;
    right: 1em;
    background: blue;
}

<div id="b">
    <div id="c">
    </div>
</div>

    CSS Howto..

    XPath how to find second element with CSS class name

    how to add css on click and remove it when they click close button [closed]

    How to push up text in CSS?

    How to set display none on tag using css?

    How to detect DOM element position to use different CSS style via CSS selection

    how do I properly position & scale these elements in CSS?

    How to put all Array values in $_GET[]

    How can I change the css class rules using jQuery?

    DOM How to add two divs (with jQuery inside them) next to each other?

    Javascript Slider not showing and Graph tips

    How to make flash movie to scale proportunatly to div width?

    How to set CSS rule for a DIV in a LI of class UL?

    How to dynamically apply nested base languages in textarea?

    Why IE10 shows something totally different

    How do I align 2 divs (each has its own padding) next to each other?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How to create a border with spaces in it [duplicate]

    how to set equal font size in table cells for mobile device html pages

    How to change class named active into link's active attribute in javascript

    how to create arrow between two background images in css

    How to make dynamic picture boxes with text on bottom with css?

    How do I include a css file while creating a wordpress theme?

    How can I make my icon
    s show up next to each other, rather than underneath each other?

    How to compress the js, css files in /public in Rails production mode

    CSS rule doesn't show up in developer tools

    Show range slider above Bootstrap progress bar (in navbar)

    CSS - How to make the A Link work inside a DIV with background image

    How to remove all inherited CSS formatting for a table?

    How to make a hyperlink navigation bar active in CSS or javascript?

    HTML5 contenteditable div: show placeholder only if div has 1 child