Handling height in percentage [HTML/CSS]

Asked

Viewed 62 times

1

good evening. I am learning technology for front-end programming and came across a program when setting the page size in percentage. I have a DIV and inside these DIV I have two more, getting like this:

<div class="pai">
    <div class="Filho-1">
    </div>
    <div class="filho-2">
    </div>
</div>

When I try to set a higher margin for child 1 in percentage, this margin is applied to father, but wanted son 1 to have a margin within father div.

I’ll send the HTML and CSS to the Pastebin and attach the screen print.

HTML: https://pastebin.com/LuaG5BQm CSS: https://pastebin.com/smzcGzJn

Com a margem top na DIV filho

Sem a margem na Div filho

I wanted that black square to have a margin on the green divide.

1 answer

-2


The upper and lower margins of the blocks are sometimes combined (collapsed/reduced) to a single margin whose size is the largest of the margins (if the elements have the same margin, one of them will not be added), combined with a behavior known as margin Collapsing.

Read more about margin Collapsing here.

To solve your specific case, you must add the property overflow:auto to the class of div conteudo.msg.

In this way:

CSS

.conteudo-msg{
    background-color: #169C79;
    height: 35%;
    overflow:auto;
}

You can better understand the property overflow in that article of w3schools.

  • Man, perfect! Thank you very much.

Browser other questions tagged

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