CODEWITHSUNDEEP
htmlcssparent-child
manix
manix

Reputation: 14747

Fill parent container

After several hours of design battle I come to you for a hand. I am building a website for a night club as you can see. wbesite preview

I can't get stretch the centered area (bordered by yellow color) to the bottom of the page where the footer start (the footer is the green top-bordered div). This happends because the content is not enought to fill the rest of heigh.

This is my css

html, body{
    height: 100%;
    margin: 0 auto;
}

#container{
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* as #footer height */
    min-height: 100%;
    text-align: center; 
    border: 5px solid blue;
}

#centered-container{
    width: 950px;
    margin: 0 auto;
    text-align: left;
    border: 5px solid yellow; 

}

#body-container{  
    border: 5px solid red; 
}

#footer, .footer{
    height: 50px;
}

#footer{
    text-align: center;
    border-top: 5px solid green;
}

And this is my html markup

<body>
    <div id="container"> <!-- BLUE BORDER -->
        <div id="centered-container"> <!-- YELLOW BORDER -->
            <div id="body-container"> <!-- RED BORDER -->
            </div>
        </div>
        <div class="footer"></div> <!-- GREEN BORDER -->
    </div>
    <div id="footer"></div>
</body>

Expected behaviour:

enter image description here

Additional facts - The colored borders is just for debugging porpuses

Upvotes: 1

Views: 21433

Answers (2)

Manuel Choucino
Manuel Choucino

Reputation: 667

if you do not mind having the yellow border you could do this

Adding some CSS for a new element.

#whiteBox{
    width:100%;
    height:1250px;
}

And adding new element between your red border

    <div id="body-container"> <!-- RED BORDER -->
            <div id="whiteBox"></div>
    </div>

Note that I put a height of 1250px as I do not have the height of your picture. But play with the height as I not know the exact height of your pic/element.

I would add something like that in JS

    window.onload = function(){
        var whiteBox = document.getElementById("whiteBox");
        whiteBox.style.height = window.innerHeight/100 * 80 + "px";
    }

Upvotes: 0

irrelephant
irrelephant

Reputation: 4111

Take out the height: auto !important; in #container. Add height: 100%; in #centered-container and #body-container. You can change the margins a bit to make it fit better.

The most important thing is that the path of tags from html down to #body-container must all have height: 100%.

See http://jsfiddle.net/NQHjc/

Edit

Based on the comments, I added

position:relative;
top:50px;

to #footer. See http://jsfiddle.net/NQHjc/3/. Note that if the text overflows the div, it will have scroll bars (using this method, it's pretty much required).

Upvotes: 5

Related Questions