Fixed header and footer/menu

Would anyone perhaps be able to help me adjust my code to accomplish the following effect?

http://www.cssplay.co.uk/layouts/basics2.html

I went through the document but am having trouble figuring out exactly how to adapt it to my existing layout without changing anything except the scroll format. That example has a fixed header and footer but rather than an internal scrolling div, it uses the standard browser scrollbar to do the same thing.

Any advice on achieving that with my current setup would be fantastic. My code is as follows:

Relevant CSS

body {
  background-color: #000000;
  color: #ffffff;
	margin: 7px 0;
	padding: 0;
	font-family: Arial, Helvetica, "Times New Roman", sans-serif;
	font-size: 13px;	
}

p {
	margin-top: 0;
	line-height: 18px;
	padding-left: 1px;
}

#header {
  background: #000000;
	margin: 0 auto;
	padding-bottom: 0px;
	width: 875px;
	height: 43px;
}


#navbar {
	width: 875px;
	height: 76px;
	margin: 0 auto;
}


#content {
  background: #000000 url(images/bg.jpg);
	margin: 0 auto;
	width: 875px;
}
	
div.scroll {
  border: 1px solid #000000;
  background:#000000 url('images/space.jpg') repeat-y 0 0;
  color:#ffffff;
  padding-left: 3px;
  padding-top: 2px;
  width:847px;
  height: 450px;
  overflow: auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;
}


Example html for main page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--#include virtual="head.inc"-->
</head>

<body>
<!--#include virtual="header.inc"-->

<div id="content">

<div class="scroll">

<h1>Title</h1>

<p>Text</p>

</div>
</div>
<!--#include virtual="navbar.inc"-->

</body>
</html>

I am unclear as to what you are actually trying to do.

it looks like your content is going to go in <div class=“scroll”> which you have given a height of 450px. This in no reflects a fixed footer/header you linked… I also noticed you had overflow-Y:auto… Is what you are trying to do have the scroll bar be linked to the content and not the browser window???

maybe if you had a link to your actual existing layout.

Sorry about that. I copied my post from another forum where I did have a link at the top of the thread. I completely forgot to include it here though, I apologize.

The site: http://tinyurl.com/4l5do76

This particular design has been in use for a year and a half now and works just fine for me in general. However, there are two concerns.

  1. Internal scrolls seem to jump to the top of the page upon refreshing, which makes updating a major inconvenience for me as I have to keep scrolling back to the right point on the page every time I refresh (which is often when editing text-heavy sections).

  2. Internal scrollboxes don’t seem to work on things like touchpad, etc. which a lot of people use at this point and I want it to be more accessible.

Basically, rather than having a separate scrollbar WITHIN the main content area, I would like it - as in the example provided in the first post - to use the standard browser scrollbar to move the content up and down while keeping a fixed width and height with a fixed header and bottom nav bar.

Ok… makes sense… the new layout will occupy the whole height screen ( it has to otherwise the fixed foot wont make much sense). you will need to give the footer(where you have your menu and ID… and you will need a wrap to center it all. get rid of the <div class= “scroll”> we wont need it, as the browser window will now be our scroll.

your general HTML will then resemble this:


<body>
<div id="pageWrap">
    <div id="head">...</div>
    <div id="content">..</div>
    <div id="navbar">...</div>
</div>
</body>


CSS


#head, #navbar{position:fixed; width: 875px;}
#head{top:0; ... }
#navbar{bottom:0; ... }
#pageWrap{margin: 0 auto; width: 875px;}

#content {
 ....
	/*margin: 0 auto;
	width: 875px; get rid of this */
}
	

generally… THATS IT

hope I have been able to help

If that’s the same as devices like the iphone then those devices don’t show scrollbars on internal elements at all. They just show the scrollbar on the main viewport and for inner elements you need to use two finger scrolling.

Basically, rather than having a separate scrollbar WITHIN the main content area, I would like it - as in the example provided in the first post - bar.
You are mistaken as Stu’s example places the scrollbar on the element called Content and the normal browsers scrollbars have been removed.

This would not solve your issue as the scrolbbars would still be missing on devices like the iphone. Removing the browsers normal scrollbars also causes other problems when content needs to be scrolled sideways also and you end up having to scroll sideways before you can get the the vertical scrollbar to scroll downwards and is best avoided.

If you wanted a fixed header and footer then the only usable way it would work would be to have a full viewport height layout with the header and footer fixed to top and bottom as Dresden suggests above. Otherwise the fixed footer would eventually lay outside of the viewport and once fixed positioned elements are outside the viewport they cannot be scrolled to or accessed in any way. They have to remain in the viewport at all times.

To illustrate what I mean this is what you are asking for:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
    background:#000;
    color:#fff;
}
#header, #footer {
    position:fixed;
    width:800px;
    background:#000;
    color:#fff;
    text-align:center;
}
#header {
    top:0;
    height:100px;
}
#footer {
    top:480px;
    bottom:0
}
#outer {
    width:800px;
    margin:auto;
    padding-top:100px;/* height of fixed header*/
    padding-bottom:800px;/* bring text above footer - this is an unknown height so we have to use a measurement larger that you think you will need*/
    background:#fff;
    color:#000;
}
p{padding:0 15px;margin:1em 0}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>This is the fixed header</h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <div id="footer">
        <p>This is the fixed footer</p>
    </div>
</div>
</body>
</html>


Run that code and then reduce the viewport height so that the footer is below the fold. Once it is below the fold it is inaccessible for ever and on smaller monitors or mobile devices it would be inaccessible.

You could place the footer at a percentage height but then your little window will grow or shrink as required.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
    background:#000;
    color:#fff;
}
html,body{height:100%}
#header, #footer {
    position:fixed;
    width:800px;
    background:#000;
    color:#fff;
    text-align:center;
}
#header {
    top:0;
    height:100px;
}
#footer {
    top:80%;
    bottom:0
}
#outer {
    width:800px;
    margin:auto;
    padding-top:100px;/* height of fixed header*/
    padding-bottom:800px;/* bring text above footer - this is an unknown height so we have to use a measurement larger than any monior height*/
    background:#fff;
    color:#000;
}
p{padding:0 15px;margin:1em 0}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>This is the fixed header</h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <div id="footer">
        <p>This is the fixed footer</p>
    </div>
</div>
</body>
</html>

Hope that explains the issues and what you can hope to achieve. (I have not included any IE6 code in the above as it doesn’t understand fixed positioning and would be best with a normal layout.)