CODEWITHSUNDEEP
htmlcssheight
T94
T94

Reputation: 109

How to give a child div width/height 100% if the parent's div is also 100% width/height

I want two divs having the width and height 100%. I know that the child div won't work because the parents div has not a specific height but is there a way to fix this?

HTML:

<div class="container">
      <div class="child-container">
      </div>
</div>

CSS:

body
{
      width: 100%;
      height: 100;
}

.container
{
      position: relative;
      min-width: 100%;
      min-height: 100%;
      background-image: url('http://www.earthbusinessdirectory.com/web/images/london.jpg');
}

.child-container
{
      position: relative;
      min-width: 100%;
      min-height: 100%;
      background-image: url('/images/black.png');
}

Upvotes: 4

Views: 5313

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240888

You use viewport relative values and give the element a min-height of 100vh. (example)

(This obviously assumes you are wanting the element to be 100% of the viewport and not the parent element)

.child-container {
    position: relative;
    min-width: 100%;
    min-height: 100vh;
    background-image: url('/images/black.png');
}

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Alternatively, you could set the height of the html element to 100% and change the .container element's min-height to a height. (example)

html, body {
    height: 100%;
}
.container {
    position: relative;
    min-width: 100%;
    /* min-height: 100%; */
    height: 100%;
}

Upvotes: 2

Related Questions