ansaurus

Question

Answer 1

A:

No. 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, e.g. make the top block 10% and the bottom 90%.

Matt Williamson 2010-08-08 05:01:16

Answer 2

+1 A:

How about something like this?

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;
}

Marko 2010-08-08 05:06:41

+1 brilliant solution Marko, I like that.

Gabriel 2010-08-08 05:09:34

Hummm. Sounds interesting... I will try it right now... Thanks!

Marcos Buarque 2010-08-08 05:14:58

Let me know how you go, I only tested it in my head :)

Marko 2010-08-08 05:23:35

The only problem I see is that the header layer must be on a higher z-index so that it covers the layer behind it. That causes the scrollbar of the content layer to disappear behind the header... Do you have any ideas on how to fix this? Thanks again!

Marcos Buarque 2010-08-08 05:32:14

Just make the content have a higher z-index than the header, as long as #content doesn't have a background color you should be fine.

Marko 2010-08-08 05:34:52

But what happens then? It seems to me the content will appear over the header if I do that... I need the scroll to start right beneath the header. But it now starts behind it at a point I cannot see. Thank you very much for the help.

Marcos Buarque 2010-08-08 05:39:41

I just updated my answer but realised the 120px is being added on top of the 100%, making part of the scrollbar hidden. Back to the drawing board.

Marko 2010-08-08 05:54:45

The problem with this is that the margin-top you are using in content offset is killing the last paragraph...

Marcos Buarque 2010-08-08 05:57:47

I mean, fixed margin-top in terms of pixels + height 100%; they blow the last paragraph; One hell of a hack I have tried right now (it works) is to add an empty div as the last element.

Marcos Buarque 2010-08-08 06:01:49

The last div with line breaks will expand the content area and allow all the content to be seen. It is kind of dirty... But...

Marcos Buarque 2010-08-08 06:03:26

Yeah but notice the position of the scrollbar, it doesn't even get to show the bottom arrow because it's hidden behind the extra 120px that are being added. Hmmmmmmmmmm

Marko 2010-08-08 06:05:32

Also another problem is that the content-offset block is blowing the limits of the #content block. The result is that the scrollbar is cut and you can't see the end of it... I almost believe there is no pure CSS solution for this...

Marcos Buarque 2010-08-08 06:06:13

Look at the layout of http://jsfiddle.net/. They use a bit of javascript to calculate the values. What you can do is leave what you have for non-js users, but maybe fix up the layout for ones that do.

Marko 2010-08-08 06:07:13

yep. Many thanks for all the help, man. I am marking as solved.

Marcos Buarque 2010-08-08 06:09:05

Thanks for that - eventho it's not really a full answer. It's pretty much bothering me now, I'll come back to it if I can find a prettier solution. Thanks for the accept!

Marko 2010-08-08 06:11:15

thanks, man, if you can find a solution for that, I will be very glad. It seems a very tricky thing to do as I was browsing the web and not getting what I needed.

Marcos Buarque 2010-08-08 06:30:46

Answer 3

+1 A:

The answer of Makro is close, but doesn't work well. The content overlaps the header.

To the point, you'd like to use position: fixed; for your header, not for your content. This also makes the wrapper superfluous. Here's a basic kickoff example, you can copy'n'paste'n'run 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>

BalusC 2010-08-08 05:22:12

It does overlap the header - but notice the top margin on the offset? by the way, padding gets ADDED on top of width/height, so your #content will be 100% + 120px.

Marko 2010-08-08 05:31:55

@Marko: The height of 100% shouldn't have been there in first place (would also not have worked since the html/body doesn't have 100% height ;) ). I updated the answer.

BalusC 2010-08-08 05:41:29

Thanks, but the difference from what I need is that the scrollbar for the #content block in your example is actually the browser scrollbar. I need a scrollbar that runs inside the #content block only, as an overflow auto.

Marcos Buarque 2010-08-08 05:46:44

Then go ahead with Marko's solution. It's only hard to get it to work nicely on a solid crossbrowser compatible manner without a bit help of JS.

BalusC 2010-08-08 05:50:23

ansaurus

tags:

views:

answers:

Pure CSS emulation of a frameset

related questions