Why div is being affected from his child? - html

Question

Empty div like this :
<div class="section" id="s"> </div>
will be at the size of the screen.
But if I put another empty div inside, this section div height will be 0, or it will be in the height of the child's content.
<div class="section" id="s">
<div class="Back"> </div>
</div>
will make this section height to be 0, unless I put something inside Back which will make the section height= openBack's content.
I need to set the section size to be the screen size no matter what happens inside it, and I couldn't.
CSS :
html {
height: 100%;
}
body {
min-height: 100vh;
}
.section {
height: 100%;
width: 100%;
}
.Back {
background-image:url("/images/bg.png");
width: 100%;
height: 100%;
background-size: cover;
justify-content: center;
align-items: center;
}
How can you set the section size to stay screen size constant ?

Answer 1

NOTE: I was answering the original question
You might want to try this:
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
would be able to cover parent div.
Check the following fiddle or snippet:
.hidden{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(254,204,254,0.5);
align-items: center;
flex-direction: column;
}
div.openBack {
position:relative;
border:1px dashed red;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div.openBack img {
flex-shrink:0;
min-width:100%;
min-height:100%
}
<div class=openBack style="width:100px; height:200px">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
<div class="hidden"></div>
</div>

Answer 2

Try below css -
.openBack{ position:relative;}
.hidden{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:9999;
}

Answer 3

To use an image as a background to a section or div, you don't want to include that image as an element. It's pushing the other elements around it out of the way, this is why the next div is pushed below it. And it would be more complicated than necessary to try to get that to behave well by using absolute position.
I would suggest attaching the image as the background-image to either your section's class or id, and remove the <img> element from the html.
either:
.openBack {
background-image: url("/folder/file.png");
}
or
#one {
background-image: url("folder/file.png");
}
You'll want to look up the properties of CSS' background-image to get it to scale and fit the exact way you want.
And you can't use number values at the beginning of IDs.
Hope this helps!

Answer 4

Thanks for all the answers, I found out that the solution was pretty simple (stupid).
The inner div closing tag was wrong <div> instead of </div> which messed up the structure.
Wish I had a tool to find such a mistake.