CODEWITHSUNDEEP
htmlcss
Pierre
Pierre

Reputation: 33

CSS nested div height 100% of screen instead of parent height

I have a div header which is fixed to the top of the page with a nested div. The div container has a height of 70px, a fixed height.

I want the nested div to have a height of 100% of the screen, not of the container div.

This is my code:

<div class="header">
    <div class="nested">Content</div>
</div>

My css:

.header {
    height: 70px;
    width: 100%;
    background-color: #ccc;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
} 

.nested {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow-x: visible;
    overflow-y: auto;
    background-color: #ddd;
}

How can I get my nested div to be the height of the screen, not the container?

Upvotes: 3

Views: 3433

Answers (3)

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

.header {
    height: 70px;
    width: 100%;
    background-color: #ccc;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
} 

.nested {
    display: block;
    position: relative;
    margin-top: 70px;
    height:100vh;
   background-color: #ddd;
}

Fiddle:https://jsfiddle.net/ek7zfzua/1/

Upvotes: 3

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

You can use height:100vh instead of percentage: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Upvotes: 0

Rajan Goswami
Rajan Goswami

Reputation: 769

For making the child div 100% in height, you will have to first let the parent div be 100%. The child div cannot break open the boundaries of its parent and show up in complete screen unless the parent div boundaries are big enough.

Upvotes: 0

Related Questions