I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.

Its hard to explain, but the best example of this is on the front page of PayPal

On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.

Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.

As far as I can see they have this html...

<div id="fixed-top">
  <header class="table-row">
    // header content
  </header>
  <div class="table-row table-row-two">
    // Video content
  </div>
  <div class="table-row">
    //bottom content
  </div>
</div>

And this CSS...

#fixed-top {
    height: 100%;
    width: 100%;
    display: table;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.table-row {
        display: table-row;
}

But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.

Help! :)

EDIT:

Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.

jQuery(document).ready(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});

    $(window).resize(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
    });
});

But saying that, Zwords CSS only method seems like a winner.

I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.

Its hard to explain, but the best example of this is on the front page of PayPal.

On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.

Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.

As far as I can see they have this html...

<div id="fixed-top">
  <header class="table-row">
    // header content
  </header>
  <div class="table-row table-row-two">
    // Video content
  </div>
  <div class="table-row">
    //bottom content
  </div>
</div>

And this CSS...

#fixed-top {
    height: 100%;
    width: 100%;
    display: table;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.table-row {
        display: table-row;
}

But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.

Help! :)

EDIT:

Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.

jQuery(document).ready(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});

    $(window).resize(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
    });
});

But saying that, Zwords CSS only method seems like a winner.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 4, 2014 at 20:15 Collins asked Jun 4, 2014 at 19:50 CollinsCollins 1,1591414 silver badges3535 bronze badges 2

• I don't see how the footer is fixed on your example?? – GreyRoofPigeon Commented Jun 4, 2014 at 20:00
• Sorry, Its not fixed in CSS, but when changing the height of the window, the bottom white bar under the video acts as if it is fixed to the bottom of the window... until you scroll down – Collins Commented Jun 4, 2014 at 20:02

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content es in, it should scroll down like other content.

Try this - http://css-tricks./snippets/css/sticky-footer/

First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.

HTML:

<div id="fixed-top">
    <header>
        // header content
    </header>
    <div>
        // Video content
    </div>
    <div>
        //bottom content
    </div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
}
#fixed-top {
    display: table;
    width: 100%;
    height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
    display: table-row;
    background: lightblue;
}
#fixed-top > *:nth-child(1) {
    background: lightgreen;
    height: 40px;
}
#fixed-top > *:nth-child(3) {
    background: lightgreen;
    height: 25%;
}

You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.

Also, check this demo.

Check this fiddle / Fullscreen

Using display:table;,display:table-row;,min-height to adjust to screen

HTML

<div class="wrapper">
    <div class="row">menu</div>
    <div class="row">content</div>
    <div class="row">footer</div>
</div>
<div class="wrapper">
    <div class="row">content1</div>
    <div class="row">content2</div>
    <div class="row">content3</div>
</div>

CSS

html,body,.wrapper{
    width:100%;
    height:100%;
    margin:0px auto;
    padding:0px;
}
.wrapper{
    display:table;
    border:1px solid black;
}
.wrapper .row{
    display:table-row;
    background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
    min-height:15px;
}
.wrapper .row:nth-of-type(2){
    height:100%;
    background-color:white;
}
.wrapper .row:nth-of-type(3){
    min-height:15px
}

You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.