quindi se creo una cosa semplice
codice:<!doctype html><html> <head> <meta charset="UTF-8"> <title>Documento senza titolo</title> </head> <body> <style> .pagina{ height:100%; width:100%; position: absolute; border: 16px solid #1f6383; } </style> <div class="pagina"> </div> </body> </html>
dovrei vedere i bordi del contenitore ad ogni modo.....invece no....ufff
In questo caso il box model è impostato di default per conteggiare solo le dimensioni del contenuto nel calcole di altezza e larghezza degli elementi; per cui il bordo di 16px, di quell'elemento, viene considerato in più oltre il 100%. Per questo è consigliato ciò che viene chiamato "box model reset".Originariamente inviata da merovese
Altra cosa, il body ha di default un margine di una decina di px (può variare a seconda del browser), che chiaramente fa discostare i contenuti dai bordi della finestra. Con una posizione assoluta puoi azzerare top e left così che l'elemento non consideri tale margine. In alternativa basta azzerare tale margine per il body.
Vecchi browser hanno dei valori di default anche per il padding sia nel body sia nell'elemento html. In generale può essere utile azzerare queste proprietà e, dal momento che ti serve avere l'intera pagina sempre al 100% della dimensione della finestra, puoi applicare larghezza e altezza al 100% per questi elementi.
Una cosa del genere:
codice HTML:<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Documento senza titolo</title> <style> * { /* Reset box model */ box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .pagina{ position: absolute; height: 100%; width: 100%; border: 16px solid #1f6383; } </style> </head> <body> <div class="pagina"> </div> </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando