CODEWITHSUNDEEP
htmljoomla2.5css
TEN Design
TEN Design

Reputation: 717

css - min-height:100% for child container, doesn't want to work?

I am working on a Joomla 2.5 template right now @ http://development.aycdesign.net/skin , and have been stuck on this for days and google has been no friend on this issue. What I am trying to accomplish is to have a variable size header, variable size footer, and always have the content container a minimum of 100% of the browser window size. I've tried just about everything under the sun, and get two problems.

  1. The container my content is in will not expand to 100% height of its container.
  2. On pages that have to scroll, a portion of the content are is clipping into the footer.

Any suggestions on this would be greatly appreciated so that i can get this resolved and move on!

<html>
<body>

<div id="wrapper">
        <div id="top">
            header
        </div>
        <div id="mnav">
            main menu
        </div>
        <div id="pagewidth">
                <div id="maincol">
                    content
                </div>
        </div>
        <div id="footer">
            footer
        </div>
</div>

</body>
</html>

....and the css:

html,body {
    height:100%;
    background: rgb(138, 126, 102);
    color: #A5A56F;
    font-family: arial, sans-serif;
    font-size: .9em;
    line-height: 1.25;
}

/* ******************************************************************** */ 
/* Wireframe Elements                                                   */
/* ******************************************************************** */   
#wrapper {
    position: relative;
    height:auto !important;
    height:100%;
    min-height:100%;
} 

#top {
       background: rgb(0, 0, 0);
       width: 100%;
}

#top .custom {
       width: 80%;
       margin: 0 auto 0 auto;
       color: #fff;
       text-align: right;
       padding: .5em 0 .5em;
}

#pagewidth {
        width: 80%;
    min-height: 100%;
        background: rgba(54, 54, 54, 0.5);
    text-align: left; 
        margin: 0 auto;
    padding-bottom: 3em;
}


#maincol {

}

#footer {
    background: rgb(0, 0, 0);
        width: 100%;
    height: 5%;
    position: absolute;
    bottom: 0;
}

#footer .custom {
    width: 80%;
    margin: 0 auto;
        color: #fff;
        text-align: right;
    padding: .5em 0 .5em 0;
}

Upvotes: 1

Views: 1204

Answers (3)

TEN Design
TEN Design

Reputation: 717

I ended up using JS to solve this....

function sizeContent() 
{
  var contentHeight = $("#outer-container").height();
  var newHeight = $("html").height() - $("#top").height() - $("#footer").height();
    if (contentHeight < newHeight)
  {
    $("#outer-container").css("height", newHeight + "px");
  }
}

//Initial load of page
jQuery(window).load(sizeContent); 
//Every resize of window
jQuery(window).resize(sizeContent);

Upvotes: 0

xyhhx
xyhhx

Reputation: 6664

Try adding the following CSS to #pagewidth :

position: absolute;
top: 20px;
bottom: 5%; /* To keep the content from stretching past the footer */
left: 50%;
margin-left: -40%;

http://jsfiddle.net/H8sg8/

When you have an element whose position is set to either absolute or fixed, you can use both top and bottom to stretch it to be those distances from the top and bottom of its container, respectively. The same can be used for left and right.

Example here

Upvotes: 1

James South
James South

Reputation: 10635

The problem is that your child container does not know the height of it's parent in order to calculate it's own height. Thankfully a lot of work has gone into looking at this problem in the past.

I like to set up my pages like this in order to get a flexible page with a sticky footer.

I'll demonstrate two ways to do it. One for modern browsers and one for if you want to support legacy ones (ie7, ie8, firefox < 17)

HTML Modern browsers

<div class="page">
    <div class="page-header">
        <div class="container">
        </div>
    </div>
    <div class="container">
        <!--Main content goes here-->
    </div>
</div>
<div class="page-footer">
    <div class="container">
    </div>
</div>

Legacy browsers

<div class="page no-box">
    <div class="page-header">
        <div class="container">
        </div>
    </div>
    <div class="container">
        <!--Main content goes here-->
    </div>
    <div class="page-push">
    <!--Acts as a buffer against the footer-->
    </div>
</div>
<div class="page-footer">
    <div class="container">
    </div>
</div>

CSS

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

.page {
    min-height: 100%;
    position: relative;
    /* Same height as the footer*/
    margin-bottom: -150px;
    padding-bottom: 150px;
    /* These allow the box model to include padding and margin*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

    .page.no-box {
        padding-bottom: 0;
    }

.page-push, .page-footer {
    height: 150px;
}

.page-footer {
    /*make sure it sits on top*/
    position: relative;
    z-index: 1;
}

.container {
    margin: 0 auto;
    width: 80%;
    max-width: 1140px;
}

I use this system a lot in my work and have created a responsive grid based on it that you can have a look at here. Hopefully this all makes sense to you.

Upvotes: 0

Related Questions