¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita0
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 Respuestas
+ 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