Look ma…..no frames!
Author: Todd Austin
I whipped this up in response to a post on a clients forum. They wanted to know how to get a frames page look without using frames. I suggested a css solution. See page here.
**This may be old to some readers, and I realize that. But some newbies may find it useful**
#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. )
content
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 are live so check them out)
NOTE: This has only been tested in IE7 and Firefox 2.0. 
Questions? Comments? Lemme know.
