I am lost! fixed header and footer with scrolling content in between

HTML & CSS
1

I have spent the better part of today running around in circles and I am stumped. I am an amateur so please be patient.

This is what I want to do, (I will try to explain it as clearly as possible).

I have a script that will rotate full screen background images on page refresh. I also have a permanently “fixed” png semi-transparent top banner. The scrolling content will go just below the top banner, and will have a top graphic that will also be using the css “fixed” property in place, while the content scrolls in and fades out of view. There is also a fixed footer where there will be the same fading effect on the scrolling content in a fixed window that will change in size depending on the user’s viewport.

As mentioned, I am stumped, I have tried pure css, a hybid using both table and css, I do not want to use javascript, or any other language, I am pretty sure someone has tried this before, could I be directed to a tutorial or resource that could point the way.

2

Hi Welcome to Sitepoint :slight_smile:

Do you mean something like this old demo.

The js is just there for IE6 as it was an old demo but I wouldn’t bother these days to go that far for IE6.

3

Hi Paul, thank you for getting back to me and excuse my noobness, the obstacle I cannot get around, and I feel I will not be getting around, is the desire to use a top banner png with transparent areas. The problem arises when the content div, that is situated below the top, semi-transparent banner scrolls, the text container moves vertically to the top of the page and the text bleeds through the transparent areas of the banner, and so ruins the effect I was after. If there is a way to solve that problem I would be interested, but it would appear I will have to go with a boxy top header.

4

Hi,

Do you mean something more like this?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
	height:100%
}
h1, p { margin:0 0 1em }
#header, #footer {
	position:fixed;
	width:100%;
	left:0;
	top:0;
	background:red;
	height:100px;
	opacity:0.7;
}
#footer {
	bottom:0;
	top:auto;
}
#content {
	position:absolute;
	top:100px;
	bottom:100px;
	width:100%;
	background:#fcf;
	overflow:auto;
}
</style>
</head>

<body>
<div id="header">
		<h1>Header</h1>
</div>
<div id="content">
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
		<p>scrolling content</p>
</div>
<div id="footer">
		<p>footer</p>
</div>
</body>
</html>

(Not IE6 compatible)

The content is contained between the header and footer and does not run underneath.

It’s generally not a good idea to forgo the usual viewport scrollbars but in some cases it can work ok.

5

Hi Paul, thanks for contributing, I will be calling it a night soon, and will play with your solution tomorrow, having already demo’d it tonight, in my version of Firefox I am seeing a right scroll-bar, where you would normally expect it, (although, in my page markup, all the content, including the text div will be centered, with space on either side), vertically the height of the div I want to scroll, with space above and below, I am sure this is what you are referring to, although to my eyes, not too elegant.

Three other options I am slowly coming round to are jquery or javascript, I am ambivalent about both, any views on this link, at least the scrollbars can be both elegant and unobtrusive… http://www.net-kit.com/jquery-custom-scrollbar-plugins/, or another scripting solution… , or would iframes be worth considering?

6

Don’t center that container as that is the new window. Just add an inner div with appropriate with and center that instead

I was referring to the fact that the scrollbar is now on the container instead of on the body as per normal. It will still be at the right edge but if you have fixed width content and close the window then in some browsers the vertical scrollbar may disappear off the right of the viewport unlike the body scrollbar that always stays in view. You will also get the horizontal scrollbar above the footer which is no to nice either.

Three other options I am slowly coming round to are jquery or javascript, I am ambivalent about both, any views on this link, at least the scrollbars can be both elegant and unobtrusive… http://www.net-kit.com/jquery-custom-scrollbar-plugins/, or another scripting solution… , or would iframes be worth considering?

Don’t consider iframes at all they cause more problems than they solve.

I’d need to see your design but I’m guessing that my demo is post #2 could work like you wanted. You could apply a matching background under the fixed banner so that scrolling text is not seen through the banner.