Make div responsive

[jess888]

Trying the make the div “mainlike” responsive so that it appears above the fold no matter the screen rez. So it would need to never be taller than the viewable screen.

http://barbarawhiteperry.com/test.html

The mainlike div is the grey box that contains the logo, menu and slideshow. The slideshow itself is already responsive.

Thanks so much; really stressed today!

[Paulie_D]

Since this will require JS to determine screen size I’ll push this over to the JS Jungle

[dyr]

Does not require js, just some fancy CSS3. :) I’ll respond with more detail after I wake up.

[Paulie_D]

Does not require js, just some fancy CSS3.

CSS can’t detect the height of the browser window and then proportion all the children as far as I know….but it’ll be interesting.

[dyr]

html, body { height: 100%; } + any children at height: 100%

You can also use media queries with height, min-height, max-height. So yes you can use CSS to scale things to the browser window (height and width.)

[Paulie_D]

Wouldn’t the footer be in the body?

The requirement (as I understand it) is that only the “main” div is to be above the fold…the OP wants this be be as large as possible AND be above the fold.

Nothing was said about any content / elements AFTER that…but perhaps I’m misunderstanding that these should be below the fold.

However, I’ll be interested in this as I think it could be really useful if we can do it with pure CSS.

[jess888]

I think this is a viewport thing, after a bit of further research. I think the problem is the slideshow won’t get shorter unless the width gets narrower.

I will keep trying, and report back if I solve it.

MERCI!

[Author]

Posts