CODEWITHSUNDEEP
htmlcss
Curnelious
Curnelious

Reputation: 1

Why div is being affected from his child?

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 ?

Upvotes: 0

Views: 110

Answers (4)

Curnelious
Curnelious

Reputation: 1

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.

Upvotes: 0

Mukyuu
Mukyuu

Reputation: 6759

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>

Upvotes: 2

shodak
shodak

Reputation: 85

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!

Upvotes: 1

Guruling Kumbhar
Guruling Kumbhar

Reputation: 1049

Try below css - 

    .openBack{ position:relative;}


.hidden{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);
      z-index:9999;

}

Upvotes: 1

Related Questions