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

My code ex. But not working, if i remove element from div, its working. https://code.sololearn.com/WFwhqnvQkWNC/?ref=app

28th Jun 2021, 6:10 PM
Sajid Ali
Sajid Ali - avatar
2 Answers
28th Jun 2021, 6:42 PM
Lisa - avatar
+ 1
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
28th Jun 2021, 11:37 PM
visph - avatar