Home/ Questions/Q 8570615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T18:35:56+00:00

I have a fluid CSS layout for a user application. The goal is that

  • 0

I have a fluid CSS layout for a user application. The goal is that the large content area (white) and the dark blue #notiarea will expand to fill the client desktop. The goal would be to have the #notiarea expand to fill the rest of the user desktop.

The #notiarea and the content div would than have a scrollbar for the content like the image below.

My question is how do I get the darkblue (#notiarea) element to expand to the rest of the application view area height only? How do I get the #notiarea to be fluid in height under all the fixed height elements, than I need the ability to use the css tag “overflow:auto;”? I would prefer a css solution but I’ll accept a jQuery solution.

example

Source code: Here’s a jsfidle for quick experimentation: http://jsfiddle.net/YLZRb/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Demo: http://dabblet.com/gist/3768929

    I use the very useful ‘box-sizing: border-box’ property to get this result, please read about it here: paulirish.com/2012/box-sizing-border-box-ftw/

    It is compatible from IE8+, you just need to tweak the layout a wee bit for IE7 and below viz. you could give the sidebar ‘position: absolute’ …it is the best one can do(without too much hassle).

    Okay, I’ve made similar layouts a gazillion times before, and couldn’t be more grateful to the box-sizing property. Here’s a quick review of the changes:

    #sidebar now has a ‘padding-top’ value equal to the height of #newpostcreator. Then, #newpostcreator is pulled back into place using negative top positioning again with a value equal to its height, in our case: -206px.

    Please note, I’ve also given every element ‘position: relative’ by using the ‘*’ universal selector. This is pretty useful when you have several absolute positioned elements on a page, so you wouldn’t have to specify relative positioning for each respective container. This is mainly a DRY(Don’t Repeat Yourself) thing and makes for cleaner code. This also gives every element additional positional control via ‘top’ ‘left’ ‘right’ & ‘bottom’.

    Also, since #sidebar is ‘position: fixed’, it is removed from the layout and is positioned relative to the viewport. So we need some blank space for it to rest without interrupting/overlapping the page content. I did this by giving #container a padding-left value equal to sidebar’s width. But I saw you’d already done that in your fiddle. i just refined it a lil bit.

    Now back to the sidebar, I’d mentioned giving it a 206 px’s of padding-top. To understand the logic behind this, you should get to know the box-sizing’s role in the layout. Basically, elements with ‘border-box’ has its padding and border all positioned inside the container. So, whatever width you specify the element, adding padding/border will not add its final width/height, it will be contained within. Keep in mind, this does not work with margins.

    So, the space left in the sidebar minus 206px’s of padding is 100%, which we now give to #notiarea.

    That is it pretty much. If you study the code, you’ll get a better understanding than what I’ve been able to provide. Please do check out the link, and remember to add vendor prefixes to box-sizing for older versions of Firefox, Opera and Chrome.

    • 0