Stretching DIV totalmente sullo schermo

Quindi, ecco la mia situazione:

Ho un div (vedi codice sotto), un abbastanza semplice . Quando si esegue il codice, a me viene un riquadro grigio. MA, la mia intenzione era quella casella grigia a span dall’inizio della finestra del browser per la FINE della finestra del browser, mentre il codice riportato di seguito non è la creazione di una casella grigia con quello che sembra essere un bordo bianco.

<div style="height: 30px; background-color: gray; color: white;">
   Hey
</div>

Mi dispiace per la mancanza di spiegazioni, ma non ho trovato nessun buon modo per parola quello che stavo cercando di fare. Grazie in anticipo,

Tom.

  • senza vedere il codice più penso width:100%; fatto?
  • aggiungere width: 100%
  • Possibile duplicare (realizzato) di stackoverflow.com/questions/90178/…
  • Sì, è ancora possiede un bordo bianco. Vorrei raccomandare di entrare in localhost per vedere cosa c’è di sbagliato.
  • Wow, tante le risposte duplicate…
  • reset margine su <body> a zero
  • Grazie, GCyrillus! Questo è stato! Fantastico!!!

 

5 Replies
  1. 2

    Se si desidera mantenere altezza:

    <div style="height: 30px; width: 100%; background-color: gray; color: white;">
       Hey
    </div>

    Anche per sbarazzarsi di bordi bianchi, aggiungere questo: body { padding: 0; margin: 0 }

    • Non hai bisogno di virgolette 100%
  2. 3

    Se si desidera un div per riempire tutto lo spazio disponibile, utilizzare le seguenti:

    width: 100%; 
    height: 100%;

    È possibile definire le dimensioni in percentuale di spazio disponibile.

  3. 2

    Se ho capito la tua correttamente, è necessario che la larghezza al 100%

    <div style="width: 100%; height: 30px; background-color: gray; color: white;">
       Hey
    </div>
  4. 2
    <head>  
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    </head>
    
    <body>
    <div style="height: 30px; width: 100% background-color: gray; color: white;">
       Hey
    </div>
    </body>

    Sto supponendo che si desidera che il div essere 30px alta e la larghezza di tutto il modo. Per farlo, ti basta impostare la larghezza del div a 100% e assicurarsi che il corpo non ha alcuna imbottitura(questo può spostare gli elementi a destra un po’. Mi consiglia di utilizzare reset.css)

    Spero che questo aiuta!

    • Si dovrebbe eliminare “px” dopo le tue misure, I. E. padding: 0; 0 ha bisogno di alcuna unità.
    • Questa è la risposta corretta. Il body ha e margini o padding di default sulla maggior parte dei browser. È necessario per lo zero, come mostrato qui. Molte persone usano un CSS Reset (es. Meyer CSS Reset) per azzerare tutte le piccole stranezze del genere e fare tutti i browser iniziare da un punto comune.

Lascia un commento