1

I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.

Synopsis

The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/

Essentially the html is like so:

<div class="contentWrapper">
    <div class="container_12">

        <div class="grid_2 leftSide clearfix">
            Left sidebar content.
        </div>

        <div class="grid_7 content">
           Lots of content loaded from the server.
        </div>

        <div class="grid_3 rightSide">
            Right sidebar content.
        </div>

    </div>
</div>

with the CSS being like

html, body {
    height: 100%;
}

.content {
    height: 100%;
}

.leftSide {
    height: 100%;
    background-color: #000000;
}

.rightSide {
    height: 100%;
    background-color: #000000;
}

.contentWrapper {
    height: 100%;
}

The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.

What I've Tried

Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.

I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.

Question

How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?

Sethen
  • 11,140
  • 6
  • 34
  • 65

2 Answers2

0

If you add the following CSS to the sidebar elements it will fill the 100% of the height.

display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;

If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...

I would also set padding and margin to 0 for the body.

EDIT:

If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle

Patartics Milán
  • 4,858
  • 4
  • 26
  • 32
  • This isn't working for me. Would you mind updating the fiddle with your answer? I would like to try and keep the `relative` position but also stretch to 100%. I am not sure how you're structuring here. – Sethen Feb 02 '14 at 18:31
0

Dont know the 960 grid, the EDITED solution - using visibility: visible; -

HTML

<div id="box">  
    <div class="vision"> sdfsdfsd </div>
</div>

CSS

#box  { 
    float: left;
    border: 2px solid red;

}
.vision {
    width: 300px;
    height: 600px;
    visibility: visible; 
}
jan199674
  • 733
  • 2
  • 10
  • 20