0
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
2 Answers
+ 1
Maybe a solution from here works for you:
https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j
+ 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