Divs daughters extrapolam Div father

Question

Divs daughters extrapolam Div father

Asked 7 years, 9 months ago

Viewed 7,271 times

4

I’m trying to get the DIV father to be filled by all the DIVS daughters, but I’ve tried several things and it doesn’t work. Always ends the father DIV being extrapolated by the daughters.

EDIT: I tested my example code and it looks like this:

DIV PAI = #corpo;

Daughter divs = all DIVS within #corpo

* {
    margin: 0;
    padding: 0;
}

nav {
    background: blue;
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: space-between;
}      

#corpo {
    width: 100%;
    height: 100%;
    background: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

#corpo div {
    clear:both;
    border: 1px solid gray;
    border-radius: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    width: 200px;
    height: 200px; 
}

#destaques {
    background: yellow;
    width: 200px;
    height: 30px;
}

.post {
    background: lightgray;
}

.post h1 {
    margin-bottom: 30px;
    font-size: 14px;
}

.post img {
    width: 200px;
    height: 100px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#footer {
    background: lightgreen;
    clear: both;
}

<nav>
    <div id="menu">Logo</div>
    <div id="logo"><img src="logo.png"></div>
    <div div="search">Search</div>
</nav>    
<div id="corpo">
    <div class="post"> <img src="https://unsplash.it/200/300?random=1" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=2" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=3" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=4" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=5" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
</div>
<div id="footer"> Footer </div>

1

I didn’t understand. I reproduced here and I didn’t notice anything strange.

– TheBiro

2017/03/14 at 18:02
It’s unclear what you want. Do you want the fixed header/footer? group the dots in the body? make the page responsive?

– Tobias Mesquita

2017/03/14 at 18:09
It seems to be working properly. What do you mean by extrapolate?

– Leon Freire

2017/03/14 at 18:10
I don’t quite understand the mistake you’re making, I tested the code and it seems to be right!

– Willian Tártaro

2017/03/14 at 18:11
@Williantártaro tested my example code and took a photo showing the problem.

– Amzero

2017/03/14 at 18:15
@Leonfreire What I wanted was for the #body to grow together with the internal Ivs.

– Amzero

2017/03/14 at 18:16
@Tobiasmesquita What I wanted was for the #body to grow together with internal Ivs.

– Amzero

2017/03/14 at 18:16
@Thebiro tested my example code and took a photo showing the problem.

– Amzero

2017/03/14 at 18:18
@Amzero, try applying one clearflix in the #corpo, as an example.: .clearfix:after {
 content:"";
 display:block;
 clear:both;
}

– Tobias Mesquita

2017/03/14 at 18:20
@Amzero give a look here https://jsfiddle.net/WillianTartaro/mg9rv9c1/, I added several posts and the body is growing together, but try to put that overflow: self that the guy spoke there in the answer!

– Willian Tártaro

2017/03/14 at 18:22
Here grew the #body. Tried to clear the cache? (=

– Aline

2017/03/14 at 18:25
@Williantártaro according to your link is normal. However I checked the code in firefox and Chrome and are in the same way as that photo of the post. I’ll reconfirm everything again.

– Amzero

2017/03/14 at 18:29
@Aline No. I’ll try.

– Amzero

2017/03/14 at 18:29

Show 8 more comments

2 answers

5

Here everything appears normal, but tries to apply a overflow: auto in the #corpo.

EDIT:

Remove the height: 100%;.

The overflow of #body was already in Visible. This forces the browser to show. Auto lets the browser choose to show or not. Doubtless I tested the self and it didn’t work.

– Amzero

2017/03/14 at 18:24
1

@Amzero Tries the overflow: auto; but apart from the height: 100%;

– Leon Freire

2017/03/14 at 18:28
I took the overflow and the height: 100%. It worked! I didn’t understand anything. The problem was the height: 100%. You know why?

– Amzero

2017/03/14 at 18:32
2

@Amzero As you can see, it was already working for everyone’s except yours. I’m not gonna be able to tell you exactly why, but I just remembered it happened in a similar way with me. If I had to force an explanation, I’d say height: 100%; was fixing your div at a height that does not correspond to the total. The overflow: auto; forces him to adapt to his children. This is more practical.

– Leon Freire

2017/03/14 at 18:35
I got it. Thank you very much for your help.

– Amzero

2017/03/14 at 18:39

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Pliavi • **983** points · Answer 1 · 2017-03-16T20:41:17+00:00

Complementing the @Leonfreire response The cause of the problem is overflow: visible next to `height: 100%, but...

Why?

The height: 100% takes 100% of the screen according to its parent element, and say... How big is your div #corpo? 100%.
Okay, not quite clear, the 100% was set according to the size of the viewport(visible area of the screen), because the body has this size (100% of the screen) in the loading, which is fixed (read absolute).

The overflow: visible, forces the content to appear, even if the father has no size for it, so the content "extrapolated", because the content had a size larger than the div, which was the size of the visible screen.

But you know the real reason for this "bug"?

Our browser is not using the correct HTML(5) specifications, due to the lack of <!DOCTYPE html>, he kicked one based on his html[1].
In some version the tag <body> has initially the size of the viewport and not the size of its content, causing it to give this problem, the 100% in the #corpo would be the size of <body> locking it at this size, not being a relative value (on the body, on my screen the body had a fixed value of ~700px, so #corpo has the size of 700px), because by default, a relative value (%) within another is ignored as it is not possible to do the calculations.
So if the value was locked in the size of the viewport, you have the problem that the contents of the div exceed the size of the div, and you need the overflow to show, but here’s the problem, the overflow:visible let things "extrapolate" and the problem was solved by removing the height:100% because you return the value of the div #corpo for the content, not the fixed size of the <body>.

Maybe I was confused, but I just wanted to say <!DOCTYPE html> because it makes the <body> also has size relative to content hehe

[1] I don’t know exactly what the behavior of the browsers regarding the omission of the DOCTYPE, and which version of the DTD (Document Type Definition) is used.