How to get correct overflow for proper div with fixed footer?


Tags: css,css3

Problem :

I am creating a site that has three major components - the navigation bar on the left, the central content (which is broken into a Title + Data), and a footer. The footer is fixed to the bottom of the page. I have JSFiddle example here: http://jsfiddle.net/6Ur89/1/

The issue I am running into is that, I want to the #data div to scroll vertically when it is too big for the div. The problem that I am seeing is that, when this happens, the div just gets pushed underneath the footer (instead of stopping at the footer) until infinity and scrolling never happens.

Within my CSS, I do have this:

html, body {
    overflow: hidden;
}

which I put in to prevent horizontal and vertical scroll bars appearing (presumably due to the footer). However, when I remove this style, the entire content div scrolls which is almost what I want (I would prefer that the title doesn't scroll...but that isn't the end of the world).

Can anybody provide any suggestions where I am going wrong? Again - want #data div to scroll and to stop at the footer. I want a fixed footer at the bottom of the site and I don't want the footer to create the scroll bars. Please let me know if you need clarifications.

Update: Yay for Stackoverflow - after typing up this question, one answer popped up immediately. I put a clearfix on the wrapper, so scrollbars don't appear due to the fixed footer. Updated my jsfiddle to reflect. So, essentially, I'm looking to understand how to just have the #data div scroll.



Solution :

http://jsfiddle.net/Xsu3Q/

added a padder inside the content div:

 <div id="content">
    <div class='padder'>
    <div id="title">title</div>
    <div id="data">Lots of data...

.padder {padding-top: 100px;}

moved the content 100px up outside the frame:

#content {
position: relative;
top: -100px;
margin-left: 350px;
height: 100%;}

This way you can use the height:100% property to match the height of the body AND subtract the 100px for your footer.

for a cleaner example look at a similar answer


    CSS Howto..

    How to make a HTML spinner with CSS

    How to hide and show div border line in my case?

    How to addClass in jQuery to all panels

    How to override html property created by script (mediaelement.js)

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    How do I change the css so lowering one class does not lower the other?

    how to give css for arranging label, textbox and text area side by side in the same line

    How to append dollar sign before text box and “k” after the text box using CSS

    HTML CSS: How to align grid to content area?

    My YouTube video wont show in iframe

    How to check if a css rule exists

    How to slide/grow a tile to position with 90x90px with CSS

    How to force inline-block wrap to new line using CSS or jQuery?

    How to remove all CSS attributes in this situation

    How to center a Dijit Select widget?

    How to use css property under a class only

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How to make a Elastic Vertical Layout?

    How to center dropdown menu under parent tab?

    how to fix buttons on the CSS box

    How to set up css hierarchies

    How to set a CSS background to scroll slowly?

    How to change the css of a text input using jquery?

    how to ignore rewriting css file with .htaccess

    How to animate selection / deselection in ace editor?

    How to create a level 4 submenu with this css?

    How to prevent this css shape to scroll left and right

    How to control the appearance of a widget on client web sites CSS

    How do browsers process and apply CSS styles to DOM elements?

    how to make css tooltip not push elements outline in FF