Make 3 Columns Fill Availabile Height + Fluid Width Center Column

[Matthew Skiles]

Code Pen Demo: [http://codepen.io/seraphzz/pen/tjLop](http://codepen.io/seraphzz/pen/tjLop “http://codepen.io/seraphzz/pen/tjLop”)

Does anybody know how to make it so all 3 of my columns will fill the entire available height of the browser window (excluding the Toolbar and Account Bar sections). And then have it so I can have scrollbars on each of the 3 sections if there is more content than what fits in the browser window.

Also I need the center column to have a fluid width so it will fill the space between the other two columns, and on certain pages when the right column isn’t need, the center column would fill that space as well.

If I need to provide more information about anything, please let me know.

Thanks :)

[David_Leitch]

Well, [this](http://codepen.io/David_Leitch/pen/pwdjG “My solution, yo!”) achieves what you need it to (I think), but feels kinda hacky. Relies on a magic number and absolute positioning, which feels wrong, but I feel like the only way to get an elegant solution is to use flexbox or javascript. Someone prove me wrong! :D

[Merri]

No hacks: http://codepen.io/Merri/pen/eorBl

`position: fixed;` is the magical property.

Note that body tag is the size of the content part. Everything else is outside of body. Body element is the one that has the scrollbar if a scrollbar is required in the content area. Also content tag is before the sidebars.

[Matthew Skiles]

Thanks so much everyone!

@Merri – Your solution is exactly what I needed. I owe you one :)

[Author]

Posts