HTML 5 div height:100% is not working

Question

I am having some problem on my div height part. I was trying to make the div height to 100% but its not working. If I didnt use the html 5 my code works fine. This is the link where i have included the live website with the following error.

This is my style.css code :

.slide {
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 30px;
}

#slide1 {
  background-color: #00B4FF;

}

#slide2 {
  background-color: #000000;
}

#slide3 {
  background-color: #00B4FF;
  height: 700px;
}

#slide4 {
  background-color: yellow;
  width: 100%;
  height: 100%;
}

#slide5 {
  background-color: #f8f8f8;
}

#slide6 {
  background-color: orange;
  height: 350px;
}

#slide7 {
  background-color: #f8f8f8;
}

I have tried manually changing the height to 100% in each of the #slide id but still its not working.

Try looking at these two posts: **1.** [how to set divs height in css and html](http://stackoverflow.com/questions/16068665/how-to-set-divs-height-in-css-and-html) **2.** [CSS: Set Div height to 100%](http://stackoverflow.com/questions/1366548/css-set-div-height-to-100-pixels) — Austin, Jun 17 '14 at 17:03
I'm not understanding the problem here. Can you give a better explanation or post a desired result screenshot? — Alex W, Jun 17 '14 at 17:11
@Austin yes i have looked into it but still its not helping for my case — user3663313, Jun 17 '14 at 17:23
@user3663313 Is there anyway you could try making a [JSFiddle](http://jsfiddle.net/) of this? JSFiddle lets you emulate snippet code which we can edit directly for you. Hit `Save` when you are done and post the url. Thanks! :) — Austin, Jun 17 '14 at 17:26
Your site link is down or not responsive so I cannot see a live demo of what is suppose to occur. So what is it that will be sliding? Like when you click on the image/name? — Austin, Jun 17 '14 at 17:45
@Austin try clicking on it again www.iconis.com.my because its working fine here actually. i have used the parallax effect on my site so that each time i click on a menu items it slides down to the particular item. — user3663313, Jun 17 '14 at 17:47
Ok there it goes, so we are talking about these colored sections, like "founding members" I assume, now when you say you want them to be at 100% div height, what exactly do you mean? Do you want them all on row? Do you want them to somehow take over the entire screen? What exactly? a simple edited `paint` image may help a bit for me to visual what you are trying to do. — Austin, Jun 17 '14 at 17:50
To add on, I am guessing you want each screen "full-sized" as you click the down arrow. As in, each button click scrolls to a full screen size, is that right? — Austin, Jun 17 '14 at 17:56
@Austin exactly each slide should be fit in full size into the screen — user3663313, Jun 17 '14 at 17:58
Answer added, I will keep updating it as necessary. You have a lot going on with the site, but I will try to help you get it working. — Austin, Jun 17 '14 at 18:10

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Try something as such

#slide1{
     height: 100%;
     width: 100%;
     position: relative;
     background-color: #00B4FF;
}

JSFiddle Demo (each slide has it within its CSS)

ALSO remove the styling CSS you have within .slide, that will interfere with your #slide styling.

On initial load, each height should be full screen relative to each #slide

Test this out on your site though as you have many layers of items occurring that are not reflected in the JSFiddle which could interfere with this code.

EDIT Just fixed roughly 20 lines of incorrect HTML for you, continuing to add updates.

EDIT 2 I think the best way to do this is if you resize the div per button click (your down arrow). Since I cannot see these trigger's however I cannot be much help. Maybe try looking into this Jquery Change Height based on Browser Size/Resize?

It's is slightly impossible to pre-set all the possible heights of each div, without knowing how the browser will be. Using JQuery as posted above will make your site a lot more dynamic/smoother.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 17 '14 at 18:02

Austin

3,010
23
62
97

In what regards? I have been updating my fiddle. Try replacing your CSS with the one I have edited, currently it is `/5/`, as you edit items, the number after will go upwards. – Austin Jun 17 '14 at 18:15
In JSFiddle, all of the "slides" are all the same height for me right now. – Austin Jun 17 '14 at 18:17
because my second slide height is still lesser than 100% – user3663313 Jun 17 '14 at 18:26
Oh okay, let me look into that. BTW make sure you toss code in here first too, I had to fix roughly 20 lines of incorrectly formatted HTML. http://validator.w3.org/check – Austin Jun 17 '14 at 18:32

HTML 5 div height:100% is not working

1 Answers1