Jump to content

body height 100%

Recommended Posts


For my homepage I need html and body to be 100% of height.

The reason is that I have a background slider which is 100% height and without body/html 100% height, it become 0 and background image doesn't show up.

The problem is that on other pages, elements (images and texts) are out of body/html since they only take 100% of browser height. Can I use class to html tag or not? I tried with height auto and 100% to body only, but doesn't work for my homepage.


One of the solution is to put height 100vh to my slider, but I know that 100vh is a bit buggy on Safari (IOS) since it doesn't take the bottom bar into consideration…

Is there any way to get a true 100% height of my slider without html/body to be 100% too?


Thank you

Share this post

Link to post
Share on other sites

If you use a wrapper element that will fit whole width and height of the body place slider and content from other pages in that and use min-height: 100%; along with body, html {height: 100%}

the slideshow should fit 100% height as a minimum, it then should adjust to accommodate content that extends beyond body/html 100% height.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now