css/javascript - How to achieve these unusual design requirements? [closed]


Tags: javascript,html,css

Problem :

I have a header div and footer div. The header div never moves; however, the footer div must stay at the bottom of the window regardless of the screen size, i.e., a "sticky footer." In between these two divs is a dynamically populated content div.

  1. The bottom of the content div sits directly atop the footer div, and it must move up and down with the footer div (when the screen size vertically expands and contracts.) It too can be considered "sticky."

  2. However, if there is enough content, the content div must expand vertically (the bottom of the content div still remaining directly atop the footer div) to accommodate as much of the content as possible. This will happen until the top of the content div runs into the header div...

  3. Then, if there is too much content to display between the header and footer divs, the content div will become scrollable, with the height of the content div contracting so as to never overlap with the header div or overlap with the footer div.

  4. And again, the content div can never overlap the header div or the footer div. If there is not enough room between the two divs to display all the content in one view, the content div must become scrollable overflow-y: scroll;.

This explains my (fruitless) attempts so far:
I have yet to successfully accomplish any of this. What I do have is minimal, and, essentially useless. Some of my problems I have are: If I make the footer div position: absolute; bottom: 0px; It will be a "sticky footer" and remain on the bottom of my screen regardless of vertical screen size. However, with this absolute positioning, the content div will happily overlap with the footer. I tried to prevent this by making the content div position: absolute; bottom: 180px;. The 180px is the height of my footer div. This works...a little. It rapidly becomes a problem when content needs to be dynamically added. The top of the content div will quickly overlap with the header div... So then I set a fixed height for the content div, and enable scrolling when it exceeds that height, but that does not take into account a screen larger than my own where there may be more room to display content.

Ultimately, none of this works the way I need it to. What is the best way to accomplish this using CSS and/or javascript (if required)? And, is there a good starting point to get me on the right track that you may know of?

Thank you for your help!



Solution :

I don't think this is possible in CSS without flexbox. If you're lucky enough to only have to support browsers that support flexbox (or if you can fall back to the standard layout in older browsers), you can try this:

HTML:

<header></header>

<div class="content">
    <div class="container"></div>
</div>

<footer></footer>

CSS:

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;

    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;

    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -o-align-items: flex-end;
    align-items: flex-end;
}

Here's the fiddle: http://jsfiddle.net/qhKa9/


If you have no problem relying on JavaScript, there might be a different solution with far deeper browser support. Here's a shot at that.

CSS:

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;
}

.container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript (uses jQuery):

var $content = $('.content'),
    $container = $('.container'),
    containerHeight = $container.outerHeight();

$(window).resize(function () {
    $container.css({
        position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
    });
}).resize();

Here's the fiddle: http://jsfiddle.net/N672c/

P.S. You should probably throttle that resize event listener, but that's a discussion for another day.


    CSS Howto..

    How To Prevent Transition Animation To Run Page Load

    float css only menu - how to modify on section2

    How to get rid of background when something is clicked

    how to put 2 triangle in together css

    How to make an image fully flexible in terms of display size?

    How to make gradually changing background in CSS become uninterruptible?

    How to make my CSS transition smoother/work on different browsers?

    How can I apply CSS to an HTML text input?

    How to activate a CSS3 (webkit) animation using javascript?

    css - how to change image source by its id?

    How do I remove the blue border when I click on a hotspot mapped to my image in HTML/CSS?

    How do I get an html/css form to post to Gravity Forms?

    How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

    How to set background-image to take remaining section of the page in semantic-ui

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    jqueryui menu's submenu — how to keep in front

    How to style radcombobox item so that words that wrap are separated

    Any ideas about how to use CSS to emulate a messy stamp?

    How to deal with collapsing margins on html & body?

    How to render email template in a page?

    How to reset tag in CSS

    CSS - How to hide extra images

    CSS - how to make the div display as shorter list box?

    css navbar how to make the text in navbar padding from top without increasing the height of the navbar

    How to access CSS generated content with JavaScript

    How to create icons like font awesome

    How can I put my div “downloads” always 70px below my image

    How to align image to the right?

    how to make div background image responsive

    How to style the entire first row of a table in css