Jump to content

Archived

This topic is now archived and is closed to further replies.

eightyp

Full Browser Height Sections

Recommended Posts

eightyp

Disclaimer: I'm a novice with CSS.

 

Hi!
 
I'm trying to set my sections to fill the browser vertically, regardless of screen resolution or browser sizing, but I haven't been able to find the right CSS to accomplish the task.  I've tried 

.fullscreendiv { height: 100%; width:100%; }
 

No good. I added:

body,html{
  height:100%;
}

Still no go.

 

I tried:

#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
}

#content {
height:100%;
min-height:100%;
}

and that was no good as well.

 

Any idea how I can accomplish what I'm attempting?

 

-Andy

 

Share this post


Link to post
Share on other sites
James B

Hi Andy

 

I'm not sure what you mean to be honest, do you want each section (like slider, then content etc) to fill the entire screen then scroll/roll down to the next section which is 100% height of the browser?

 

If so there's no way to do that type of effect with css that I'm aware of, you'd need some form of jquery solution where the sections would be resized automatically to fill the browser and then scroll action would take it down ot the next full width section etc.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
eightyp
do you want each section (like slider, then content etc) to fill the entire screen then scroll/roll down to the next section which is 100% height of the browser?

 

Yep, that's what I'm trying to do.

I found this:
 

If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div. 

(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)

Does this seem like an avenue that may be worth investigating?

Share this post


Link to post
Share on other sites
Rob

It sounds like you want a Parallax effect, seen here: http://depthcharge.etc.io/

 

Is that correct?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
eightyp

It sounds like you want a Parallax effect, seen here: http://depthcharge.etc.io/

 

Is that correct?

No... although I am playing around with DepthCharge already for some other fun stuff.

 

The site I'm working on has 5 sections on the main page. Each section is intended to be full width and full height in the user's browser, regardless of that user's resolution or the size of their browser window. 

 

This link talks about exactly what I want to do and provides a solution... but when I try to implement it nothing happens.
http://stackoverflow.com/questions/10475150/100-min-height-for-multiple-divs



 

Share this post


Link to post
Share on other sites
Rob

Okay, try

body .site-wrap {

min-height: 100%;

}

 

All the sections... header, footer, content area... are all within that element.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
eightyp

Okay, try

body .site-wrap {

min-height: 100%;

}

 

All the sections... header, footer, content area... are all within that element.

Nope... that didn't seem to do it.
 

However, I went back and looked at DepthCharge a little deeper after your comment... the Panel option is exactly what I'm looking for, so I'm going to utilize it for this project...

 

Thanks for your help!

Share this post


Link to post
Share on other sites
Rob

You're very welcome!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×