how to set div heigth 100% to match document/window height of all devices

Question

i'm working on a page in wordpress which shows 8 divs with some content.i want to show those all divs to 100% of window height in all devices and then when user click on the link next it shows another div one after another on clicking next, but somehow my divs are not going 100% in height.

Here is the css:

<style>
html {
    height: 100%;
}
body {
        line-height:25px;
    margin: 0;
    padding: 0;
    height: 100%;
}
.content {
    margin: auto;   
    min-height: 100%;
}

</style>

Here is the html:

<div class="container">

<div class="content" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>

<div class="content" id="Initial" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>

</div>

Here is the link for my dummy page:

http://enablersinvestment.com/backend/how-it-works-scroll/

score 1 · Accepted Answer · answered Dec 11 '14 at 12:02

1

You just need to set .content min-height to be 100vh as follows:

.content {
    margin: auto;   
    min-height: 100vh;
}

checkout this demo: http://jsbin.com/xayaku/1/

answered Dec 11 '14 at 12:02

SaidbakR

13,303
20
101
195

thnks a lot for ur precious help.its working for me.can u tell me why 100vh is working but 100% is not working. – Montiyago Dec 11 '14 at 12:17
@Montiyago You could able to know more from this: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window/16837667#16837667 – SaidbakR Dec 11 '14 at 13:06
@Montiyago If you find it a suitable answer for your issue, please select at as an answer. – SaidbakR Dec 11 '14 at 13:18
thnks for ur help.its working perfectly.but now i have new problem that when i gave margin to the content inside this div its working fine for first div but not for all other div.can u check the url please. – Montiyago Dec 12 '14 at 11:14
@Montiyago You should set a top margin value larger than the height of the floating navigation menu. – SaidbakR Dec 12 '14 at 11:52
i have set it to margin:13% 0 0 0; but its not working. – Montiyago Dec 12 '14 at 12:03
Could you cancel the right click prevent script to allow me inspect ing it. – SaidbakR Dec 12 '14 at 12:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66749/discussion-between-montiyago-and-ss). – Montiyago Dec 12 '14 at 12:21

Djoezz · Answer 2 · 2014-12-11T12:07:42.913

0

If im correct The child adepts the percentage height to the height of the parent.

And in your case the child is content en the parent is container. You should give container a height of 100%.

.container {
    min-height: 100%;
}

Do correct me if im wrong

edited Dec 11 '14 at 12:07

answered Dec 11 '14 at 11:58

Djoezz

80
1
9

thnks a lot for ur reply but somehow its not working. – Montiyago Dec 11 '14 at 12:19

score 0 · Answer 3 · answered Dec 11 '14 at 12:00

You need to set the height of .container to 100% as well:

html {
    height: 100%;
}
body {
        line-height:25px;
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
  height: 100%;
}

.content {
    margin: auto;   
    min-height: 100%;
}

score 0 · Answer 4 · answered Dec 11 '14 at 12:04

0

Your problem here is that your content is inside the container and container does not have height: 100%.

Add the following rule to your css and you should be fine.

.container {
    min-height: 100%;
}

answered Dec 11 '14 at 12:04

Roumelis George

6,602
2
16
31

thnks a lot for ur reply but somehow its not working. – Montiyago Dec 11 '14 at 12:18

score 0 · Answer 5 · answered Dec 11 '14 at 12:59

0

To get divs to fill the whole webpage, you must add this line:

position: absolute;

For example:

div.content {
    position: absolute;
    height: 100%;
}

Without that line, the '100%' will be considered as the size of what is inside the div.

answered Dec 11 '14 at 12:59

Danish Humair

37
6

how to set div heigth 100% to match document/window height of all devices

5 Answers5