Look ma…..no frames!
The html is just three divs: header, content and footer. Here’s a quick look at the css for the header and footer:
#header {
background-color:#000000;
color:#ffffff;
top:0;
position:fixed;
height:80px;
width:100%;
}#footer {
background-color:#000000;
color:#ffffff;
bottom: 0;
position: fixed;
height:80px;
width:100%;
overflow: hidden;
z-index: 100;
}
We use position:fixed so that both the footer and header remain in place as the page is scrolled and to keep the position relative to the browser window no matter what positioning the parent element has. Using the offset properties top and bottom, we tell the browser specifically where to position these elements. Using top and bottom on the #content element, we imply a height for the element.
#content {
padding:0;
margin: 0;
top:80px;
bottom:80px;
position:fixed;
width:100%;
overflow:auto;
}
Then if you like, you could use a server side include (SSI) for the content, as I have done here: http://designreverb.com/test_noFrames.php. Here I have the same header, content and footer divs. The content is being called from another page: some_content.shtml. (The page could just have easily been .htm, .php, .html …etc. )
<div id="content"> <p>content</p> <?php include 'some_content.shtml'?> </div>
This works great, but you’re ‘test_noFrames’ page will have to be a .php file (test_noFrames.php instead of test_noFrames.htm) like this: http://designreverb.com/test_noFrames.php and http://designreverb.com/some_content.shtml (these url’s ar live so check them out)
NOTE: This has only been tested in IE7 and Firefox 2.0. 🙂
Questions? Comments? Lemme know.
old news.
Maybe…but someone may find it useful.
I remember 456 beretta street having an article about this ages ago but I don’t think the code was as simple. Nice article.
@LukeL: You are absolutely correct…after getting blasted about how “old†this is on Stylegala, I did a quick search. I see that 456bereastreet.com did do an article some time ago. As a person who never had much use for frames, I never really needed the technique, and as such had never read that particular article. As I said in my post someone had asked the question, so I answered it.
I don’t think, that’s a great way to this. It doesn’t work on IE6…
@cemshid: Noted…this was written for FF 2.0/IE7. Thanks for the heads up about IE6. For IE6 check out http://www.456bereastreet.com/lab/cssframes/
The beatstreet article mentions using the below code for IE6. Can someone tell me exactly where this code would go in the above example?
Yes, I’m the one that started this whole thread. I know its old technology…I just don’t do web stuff enough. 🙂
—————————-
The biggest problem is IE/Win’s lack of support for position:fixed. To get around this I’m using conditional comments to load an extra stylesheet if the browser is IE6:
html {
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
———————-
This might be old news, and I might be a newbie (I’m not, but I haven’t thought of this one before, nor read about it).
Thanks for the tip, I think this might be just the thing for a few clients who are not ready to spend that much money on their homepages, but want to move toward better SEO.
@Lars: Yeah…I felt the same way. I hadn’t thought about this before, not that I have any real use for it. I’ve never been a proponent of frames, so that may be why. This may be an old technique, but even some of us who have been around awhile haven’t seen it in use.
I found it helpful–thank you.
So has anyone gotten this to work in IE as far as only the middle content section scrolling?
I still can’t figure out how to use this code. lol
html {
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
For IE6 put this at the top of your css page:
html {
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
and in the header and footer elements set
position:absolute;
instead of position:fixed;