CODEWITHSUNDEEP
cssheightwrapperfooterfixed
Andycap
Andycap

Reputation: 525

Wrapper 100% height, fixed footer and fixed menu

I know, this topic has been opened 1000 times, but I didn't find a suitable solution (or a solution I could understand).

I have a simple page (wordpress) with a fixed nav menu on the left, scrollable content in center and a fixed footer (always visible).

I have 2 problems I have tried to solve in every way:

1) the wrapper (100% height) wraps ok until you scroll the page, but does not extend after the scroll (see attached image, page is scrolled to bottom).

2) the content at the bottom is under the footer, I couldn't find a way to apply a -30 padding to make readable the final part of the content ( I think this relates to the problem no.1).

Here is the CSS (also used a reset.css based on YUI reset):

  /* LAYOUT */

.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }


/* GENERAL LAYOUT */


html, body{
    margin    : 0;
    padding   : 0;
    height    : 100%;
    border    : none;
}


#wrapper{

    min-height: 100%;
    width: 100%;
    background: red;
    overflow: hidden;
}

#container{

    width: 960px;
    margin-left: 40px;
    padding-bottom: 30px

}

#navigation{
    position: fixed;
    overflow:hidden;
    width: 200px;

}

#content{

    position: absolute;
    overflow: auto;
    width: 420px;
    margin-left: 220px;


}

li > a {
    display: block;
}

a {outline: none;}

/* NAVIGATION */

h1.logo {
    height: 155px;
}

#navigation ul{  
    margin:0;  
    padding:0;  
    text-align: right;

}  

#navigation ul li{  

    height:28px;  
    display: inline-block;
    color:#000;  
    padding: 0 0 0 0;

    overflow:hidden;  
    line-height: 28px;
    margin-bottom: 7px;

}  

#navigation li a{  

    padding: 0 28px 0 0;

}  

.nav-blog{
    width:190px;  
    border-left-color: #d1bbe8;
    border-left-width: 10px;
    border-left-style: solid;
    background-color: #edece6;

}

.nav-eventi{
    width:190px;
    border-left-color: #aa87a0;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-bio{
    width:190px;
    border-left-color: #e2b893;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-discography{
    width:190px;
    border-left-color: #365f68;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-photos{
    width:190px;
    border-left-color: #545768;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-videos{
    width:190px;
    border-left-color: #4b5668;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-contact{
    width:190px;
    border-left-color: #686055;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

/* ----------Active links----------- */

.home .nav-blog 
{
    width: 150px;
}

/* POST */

#ilpost{

    width: 420px;
    margin: 0 0 18px 0;

}

.spaziovuoto{

    height: 155px;
}

.type-blog{

    border-top-color: #d1bbe8;
    border-top-style: solid;
    border-top-width: 12px;

}

#tempo{

    height: 32px;
    background: url('../images/flatback.png');

}

.iltitolo{

    background-color: #edece6;

}

.ilcontenuto{

    background-color: #edece6;

}


/* PLAYER */

#player{

    clear: both;
    width: 100%;
    position: fixed;
    bottom: 0px;
    height: 30px;
    background: #000;
    color:#fff;


}

And the HTML:

(head omitted)

<body class="home blog"> 
    <div id="wrapper"> 
        <div id="container">            
            <div id="navigation"> 
                <h1 class="logo">Logo</h1> 
                <ul> 
                    <li class="nav-blog "><a href="/">blog</li> 
                    <li class="nav-eventi sel"><a href="/">eventi</a></li> 
                    <li class="nav-bio sel"><a href="/">bio</a></li> 
                    <li class="nav-discography sel"><a href="/">discography</a></li> 
                    <li class="nav-photos sel"><a href="/">photos</a></li> 
                    <li class="nav-videos sel"><a href="/">videos</a></li> 
                    <li class="nav-contact sel"><a href="/">contact</a></li> 
                </ul> 
            </div><!-- .navigation --> 
<script type="text/javascript">  

            jQuery(function($){
                $.supersized({
                    //Background image
                    transition_speed : 50,
                    slides  :  [ { image : 'http://localhost/xxxxxxxx/wp-content/themes/xxxxxxxxxx/images/sfondotest1080.jpg' } ]                   
                });
            });

        </script> 
        <div id="content"> 
        <div class="spaziovuoto"></div> 
                <!-- LOOOOOOOOOOOP --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized // 10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">test post 4</p> 
                        <p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
                    </div><!-- .ilpost --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized // 10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">test post 3</p> 
                        <p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
                    </div><!-- .ilpost --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized // 10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">test post 2</p> 
                        <p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} --> <!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
                    </div><!-- .ilpost --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized // 10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">Hello world!</p> 
                        <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p> 
</div> 
                    </div><!-- .ilpost --> 

        </div><!-- .content --> 


            <ul class="xoxo"> 



                    </ul> 


            </div> <!--  container --> 
</div> <!--  E wrapper--> 
<div id="player">Player</div> 
</body> 
</html>

Just in case, I attached an image with an explanation.

Just in case, I attached an image with an explanation.

Thanks for your help!

Upvotes: 1

Views: 16033

Answers (3)

clairesuzy
clairesuzy

Reputation: 27624

#navigation{
    position: fixed;
    overflow:hidden;
    width: 200px;
    left: 40px; /* add this */
}

#content{

    /*position: absolute; remove this*/
    overflow: auto;
    width: 420px;
    margin-left: 220px;
}

your page has no content.. well it thinks it doesn't ;)

so remove the absolute positioning from the content .. let the content remain in the flow this should mean that the existing min-height on the wrapper actually gets a chance to work (at the minute it thinks there's nothing in it so it can't grow)

that then appears to work but IE7 gets a bit pernickety, like it does and moves the nav over the content - so just explicitly (give a tsk and) tell it where you want it to be (help it count!) and add the left position on #navigation

Upvotes: 2

Gareth
Gareth

Reputation: 5719

Have you tried using min-height: 100% instead of height: 100% on your body and html styles?

Upvotes: 0

Mechwd
Mechwd

Reputation: 400

As far as the wrapper, take off the 100% height. It will default to auto height and expand to the content.

For the content under the footer you just apply a bottom padding to the content, and take off the absolute positioning. Just put a left margin on it (and possibly a float).

Upvotes: -1

Related Questions