Scrolling content (sticky header+footer) in Zen 7.x-5.x [#1722094]

Hi all,

I'm creating a new website with a Zen 7.x-5.x subtheme. I've been trying to get this to work but it just won't do what I want.

What I would like is for the header and footer to stay where they are while the content scrolls if necessary.
The footer should stay at the bottom of the page at all times.

I've almost got it right except that the content area is higher than the window, leading to two scrollbars (one for the window and one for the content, if that is longer than the content area) and the content runs through the footer.

Here's the CSS I added to responsive-sidebars.css

html, body, #main {
height: 100%;
margin: 0;
}

#page {
height: 100%;
width: 76%;
text-align: left;
margin: 0 auto;
background-color: #fff;
}

#header {
height: 110px;
}

#content {
height: 100%;
overflow-y: auto;
}


body {
background-color: #f0f0f0;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 10pt;
	}
	
#header, #footer {
color: #000000;
	background-color: #9999CC;

}



#footer {
width: 76%;
margin: 0 auto;
height: 40px;
margin-top: -40px;
}

Anyone have any ideas how to fix this?

Comments

Comment #1

sunshinee CreditAttribution: sunshinee commented 14 August 2012 at 16:35

Karin,
Have you tried adding margins to #content to account for the heights of the header and footer?

An alternative, which would keep a scrollbar out of your content area, would be to give the header and footer static positioning and allow the rest of the page to move behind them. (see http://css-tricks.com/snippets/css/fixed-footer/)
Joy

Comment #2

Karin CreditAttribution: Karin commented 16 August 2012 at 10:16

Status:

Fixed

» Active

I have tried margins but that doesn't seem to help.

I will have a look at your other suggestion and see if that works.

ETA: The fixed header and footer works well in most browsers so far. Thank you! Had to fiddle with z-indexes to make it appear the same in FF and Chrome and the android browser on my tablet. I did have to drop the dynamic width in order to get the page centered.

In case anyone is interested, here's the CSS I have now.


#page {
min-height: 100%;
width: 960px;
text-align: left;
margin-top: 110px;
background-color: #fff;
}

#header {
height: 110px;
position: fixed;
top: 0;
width: 960px;
z-index: 95;
}

#footer {
position: fixed;
width: 960px;
left: 50%;
margin-left: -480px;
height: 40px;
bottom: 0;
z-index: 90;
}

I also have a superfish menu overlayed on the header, position at the bottom of the header, here's the CSS for that

.region-navigation {
position:fixed;
top: 75px;
width: 960px;
z-index: 99;
}

#superfish-1 {
float: right;
margin-right: 10px;
}

Comment #3

Karin CreditAttribution: Karin commented 16 August 2012 at 10:02

Status:

Active

» Fixed

Comment #4

Karin CreditAttribution: Karin commented 16 August 2012 at 10:22

Ok I spoke a bit too soon. I still have a bit of a problem.

The page area is 960px wide and has a different background color than the body. In order to have that background color go from top to bottom I have to add min-height: 100%; to #page but that results in a scrollbar even if the content is not higher than the window. Removing the margin-top will stop the scrollbar appearing but of course this results in the content moving up to the top of the window behind the header. I've tried various variations of margin-bottom and padding-bottom include negative values but it doesn't seem to help.

Somehow I have to make the page be 100% - header (min-)height; because this way the header height gets added to the bottom of #page resulting in a scrollbar.....

Comment #5

sunshinee CreditAttribution: sunshinee commented 16 August 2012 at 14:37

Karin,
Maybe you could use a 960 x 1px background image repeated vertically on the body?

Joy

Comment #6

Karin CreditAttribution: Karin commented 17 August 2012 at 13:03

I think I've figured it out.

#header is inside #page but because of the fixed position of the header and the top margin on page things get problematic. That's why the height of the header still counts for the #page and gets pushed down by the margin.

So the clue is to put the top margin on #main instead and position #page absolutely to the top.

html, body {
height: 100%;
margin: 0;
}


#page {
min-height: 100%;
width: 960px;
text-align: left;
background-color: #fff;
position: absolute;
top: 0;
left: 50%;
margin-left: -480px;
}

#main {
margin-top: 110px;
}

#header {
height: 110px;
position: fixed;
top: 0;
width: 960px;
z-index: 95;
}

#footer {
position: fixed;
width: 960px;
left: 50%;
margin-left: -480px;
height: 40px;
bottom: 0;
z-index: 90;
}

The final problem I have now is that this layout acts rather strange in my android browser (when zooming things jump all over the place). So I'll have to make a separate CSS without fixed header and footer for android or drop the whole thing after all....