How to create full body page div with body margin 5px ??

Question

My code ex. But not working, if i remove element from div, its working.

https://code.sololearn.com/WFwhqnvQkWNC/?ref=app

Answer 1

Maybe a solution from here works for you:
https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j

Answer 2

body {
height: calc(100vh - 10px);
margin: 5px;
}
div {
height: 100%;
background-color: red;
}

however, if div content overflow div dimensions, that would break: vertical oveflow will let div height grow accordingly, while horizontal ovrerflow will let content visible outside of div...

one solution would be to set overflow: hidden; to the div, but then margin-top of first child will apply... and content overflow will never be seen ^^

another solution would be to set overflow: auto; to the div, but on overflow that will add scrollbars to it... and margin-top of first child will also apply ;P

margin-top of first div child could be forced to 0 by:

div > :first-child {
margin-top: 0;
}

anyway, width: 100%; is pointless in block type element (default to full width available)...

using padding on body will make the body content first text node having new line(s) adding on line-height to the top margin...

as you could see, full body page with body margin is quite tricky to make it works