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

0 Views

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:

Read More
<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/
Post Views: 0

Related posts

Leave a Reply

5 comments

  2. 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%;
}

  3. 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%;
}

  4. 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

  5. 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.