Geek Answers Handbook

Pure emulation of CSS frameset

I searched for more than 1 hour without success. Is there a clean CSS way to emulate a set of frames? I mean, really imitating that. I found some interesting things where you will have fixed top and bottom blocks, but the scroll bar for the content is the usual browser scroll bar. I need a scrollbar just for the content block, as a set of frames does.

I can make it work by assigning overflow: automatically to my div content area and setting a fixed height. But the problem is that I do not know the size of the client browser window without using javascript. And I do not want to use javascript for this. I can also use percentages for heights, since my top block has a fixed height. The bottom block is the one that should expand or contract depending on the height of the browser window. Any help appreciated. Thanks!

+7
dom html css xhtml frameset
source share
3 answers

How about something like that?

HTML

<div id="header"> <img src="logo.gif" alt="logo" /> <h1 class="tagline">Oh em gee</h1> </div> <div id="content"> <div id="content-offset"> <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p> </div> </div>

CSS

 body, html { margin: 0; padding: 0; height: 100%; } #header { height: 120px; position: fixed; top: 0; background: red; width: 100%; } #content { height: 100%; position: absolute; top: 0; } #content-offset { margin-top: 120px; background: aqua; height: 100%; width: 100%; position: fixed; overflow: auto; }
+1
source share

Macro's answer is close, but not working. Content overrides the title.

By the time, you want to use position: fixed; for your title, not for your content. It also makes the shell redundant. Here is an example of a basic launch, you can copy the "do not let" it.

 <!DOCTYPE html> <html lang="en"> <head> <title>SO question 3433129</title> <style> body { margin: 0; background: aqua; } #header { position: fixed; height: 120px; width: 100%; background: pink; } #content { padding-top: 120px; /* Should be the same as #header height */ } </style> </head> <body> <div id="header"> <h1>Header</h1> </div> <div id="content"> <p>Start of content.</p> <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> <p>End of content.</p> </div> </body> </html>
+1
source share

Not. I think you will have to use javascript to get the window size for this unless you set the top block to a fixed% size, for example. make the top block 10% and the bottom 90%.

0
source share

More articles:


All Articles