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

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

i want 2 divs having width , height 100%. know kid div won't work because parents div has not specific height there way prepare 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'); }

you utilize viewport relative values , give element min-height of 100vh. (example)

(this assumes wanting element 100% of viewport , not parent element)

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

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

the viewport-percentage lengths relative size of initial containing block. when height or width of initial containing block changed, scaled accordingly.

alternatively, set height of html element 100% , alter .container element's min-height height. (example)

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

html css height