Question

So, I’m having trouble with a layout. I would like to have the sidebar reach 100% of the content’s height. I’ve tried tricks other people gave and they didn’t work. I don’t know if it’s because my page layout is slightly different or something but yeah…

The code:

<div id="page">
    <div id="top">
       <div id="topwidth">
             this is a top bar
       </div>
   </div>
   <div id="leftmenu">
        this is a fixed floating menu to the left
   </div>
   <div id="wrapper">
    <div id="maincontent">
        <div class="post">
                         This is my content area. multiple post divs will be here
        </div>
    </div><!-- Main Content-->
    <div id="sidebar">
                Yep... this is where the trouble is; It won't go 100%.
    </div> <!-- Sidebar -->
    <div id="clearfix">
        ...I tried this.
    </div>
</div> <!-- Wrapper -->
<div id="footer">
    This is my footer, it's 100% the width of the page.         
</div> <!-- Footer -->
</div> <!-- Page -->

and the css:

* {
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
cursor:default;
}

a {
transition: color 1s;
-moz-transition: color 1s; /* Firefox 4 */
-webkit-transition: color 1s; /* Safari and Chrome */
-o-transition: color 1s; /* Opera */
}

html {
height:100%;
width:100%;
}

body {
height:100%;
width:100%;
overflow-y: scroll;
}

#page {
width:100%;
display:block;
background-color:#FFF;
    background-image: -moz-linear-gradient(left , #BCBCBC 0%, #FFFFFF 10%,     #FFFFFF 90%, #BCBCBC 100%);
        background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0, #BCBCBC),
            color-stop(0.1, #FFFFFF),
            color-stop(0.9, #FFFFFF),
            color-stop(1, #BCBCBC)
    );
}

#top {
background-color:#6666ff;
border-bottom:1px solid #3333ff;
height:39px;
width:100%;
z-index:99;
position:fixed !important;
box-shadow:0px 5px 10px rgba(50, 50, 50, 0.5);
}

#wrapper {
margin:0px auto;
padding-top:50px;
width:950px;
text-align:center;
}

#leftmenu {
margin-left:-75px !important;
z-index:98;
height:100%;
width:75px;
text-align:center;
position:fixed;
border-right:15px solid #999fff;
display:block;
background-color:#FFF;
    background-image: -moz-linear-gradient(left , #f5f5f5 0%, #f5f5f5 95%, #e5e5e5 100%);
        background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0, #e5e5e5),
            color-stop(0.5, #f5f5f5),
            color-stop(0.95, #f5f5f5),
            color-stop(1, #e5e5e5)
    );
background-repeat:no-repeat;
box-shadow:0px 0px 10px rgba(50, 50, 50, 0.5);
transition: margin-left 0.3s;
-moz-transition: margin-left 0.3s; /* Firefox 4 */
-webkit-transition: margin-left 0.3s; /* Safari and Chrome */
-o-transition: margin-left 0.3s; /* Opera */
}

#header:hover {
margin-left:0px !important;
}
#maincontent {
width:625px;
height:100%;
float:left;
position:relative;
}

#clearfix {
width:100%;
clear:both;
}

#sidebar {
width:300px;
height:100%;
margin-top:5px;
position:relative;
float:right;
}

#footer {
text-align:center;
clear:both;
height:100%;
width:100%;
padding-top:10px;
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 100%);
        background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0,rgba(255,255,255,0.001)),
            color-stop(1,rgba(255,255,255,1))
        );
}

Answer 1

I think this is what you were looking to do?

CSS:

    * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }

a {
    transition: color 1s;
    -moz-transition: color 1s; /* Firefox 4 */
    -webkit-transition: color 1s; /* Safari and Chrome */
    -o-transition: color 1s; /* Opera */
    }

html {
    background-color: #FFF;
    background-image: -moz-linear-gradient(left , #BCBCBC 0%, #FFFFFF 10%,     #FFFFFF 90%, #BCBCBC 100%);
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #BCBCBC),
        color-stop(0.1, #FFFFFF),
        color-stop(0.9, #FFFFFF),
        color-stop(1, #BCBCBC)
        );
    height: 100%;
    width: 100%;
    }

body {
    height: 100%;
    overflow-y: scroll;
    position: relative;
    width: 100%;
    }

#footer {
    background: #ccc;
    clear: both;
    min-height: 150px;
    padding-top: 10px;
    text-align: center;
    }

#header {
    background-color: #6666ff;
    border-bottom: 1px solid #3333ff;
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.5);
    height:39px;
    position:fixed;
    width:100%;
    z-index:99;
    }

#leftmenu {
    margin-left:-75px;
    height:100%;
    width:75px;
    text-align:center;
    position:fixed;
    border-right:15px solid #999fff;
    display:block;
    background-color:#FFF;
        background-image: -moz-linear-gradient(left , #f5f5f5 0%, #f5f5f5 95%, #e5e5e5 100%);
            background-image: -webkit-gradient(
                linear,
                left top,
                right top,
                color-stop(0, #e5e5e5),
                color-stop(0.5, #f5f5f5),
                color-stop(0.95, #f5f5f5),
                color-stop(1, #e5e5e5)
        );
    background-repeat:no-repeat;
    box-shadow:0px 0px 10px rgba(50, 50, 50, 0.5);
    transition: margin-left 0.3s;
    -moz-transition: margin-left 0.3s; /* Firefox 4 */
    -webkit-transition: margin-left 0.3s; /* Safari and Chrome */
    -o-transition: margin-left 0.3s; /* Opera */
    z-index:98;
    }

#maincontent {
    background: #ccc;   
    float: left;
    position: relative;
    width:950px;
    }

    #maincontent .post {
        background: #eee;
        width:625px;
        }

#sidebar {
    background: #f00;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    }

#wrapper {
    height: 100%;
    margin:0px auto;
    padding-top:50px;
    width:950px;
    }

---

HTML:

<div id="header">
    HEADER
</div>

<div id="leftmenu">
    this is a fixed floating menu to the left
</div>

<div id="wrapper">

    <div id="maincontent">
        <div class="post">
            This is my content area. multiple post divs will be here
        </div>

        <div class="post">
            This is my content area. multiple post divs will be here
        </div>

        <div class="post">
            This is my content area. multiple post divs will be here
        </div>

        <div class="post">
            This is my content area. multiple post divs will be here
        </div>

        <div class="post">
            This is my content area. multiple post divs will be here
        </div>                                      

        <div id="sidebar">
            Yep... this is where the trouble is; It won't go 100%.
        </div>                                              

    </div><!--maincontent-->

</div><!--wrapper-->

<div id="footer">
    FOOTER
</div>