CODEWITHSUNDEEP
cssheight
parliament
parliament

Reputation: 22904

Position fixed with variable height

I'm looking for a way to make sure the height of a scrollable, fixed element adapts to fit all the whitespace down until the footer.

Please see the following fiddle which is the layout I'm working on.

Been stuck on this for 2 days, it's about time to move on.

Better to see the fiddle in firefox, sidebar scrollbar not scrolling in chrome for some reason but that's a different issue.

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

    <section id="platformContent">
        <div id="platformBody">        
             <ul class="mainList">
                 ...                 
            </ul>
        </div>
    </section>

  <section id="toolBarContainer">
    <div id="toolBarContent">
        <ul id="toolBarList">
            ...
        </ul>
    </div>
</section>

<footer></footer>

Upvotes: 1

Views: 2644

Answers (1)

James Donnelly
James Donnelly

Reputation: 128781

Assuming you want the toolBarList container 100% height - this is what you already have. The sidebar is 100% height. The list within, however, is only set at 200px:

#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
    height: 200px;
    ...
}

Changing that to height:100%; makes it fill the entire height of the document. The problem now is accounting for the header and footer. This is a common question, however, and I've answered it myself here: https://stackoverflow.com/a/14892331/1317805 as have many other people. You'll need to ensure that the header and footer aren't hidden by or covering the content area.

I think you might need javascript to do this – 9edge

Not at all!

Also, please note when using section tags:

Use of the element is not to be thought of as outlining content that needs to be styled visually in a particular way. If this is the case the author may be best advised to just use a semantically neutral div.

Your #platformContent and #toolBarContainer styling may yield unexpected results.

http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements

In fact, your styling of those sections can be completely replaced with: 

#platformBody, #toolBarContent {
    position:relative;
    height:100%;
    top: 70px;
    width: 100%;   
}

Upvotes: 2

Related Questions