Perché l'altezza non funziona al 100% per espandere i div all'altezza dello schermo?

In HTML, l'utente può creare uno o più contenitori con l'aiuto di "" O "" elementi. Inoltre, CSS consente al suo utente di modificare la larghezza e l'altezza del contenitore in base alle loro necessità. Tuttavia, l'altezza: il 100% non funziona perché dipende dall'elemento genitore. Per fare ciò, prima impostare l'altezza dell'elemento genitore, quindi impostare l'altezza Div.

Questo articolo spiegherà l'altezza: 100% per espandere i Div all'altezza a schermo intero.

Perché non l'altezza: il 100% lavora per espandere i div all'altezza dello schermo?

Se gli utenti vogliono utilizzare la regola di stile "Altezza: 100%"Per creare un contenitore Div tutta l'altezza dello schermo, semplicemente non funziona poiché la percentuale (%) è un'unità relativa, il che significa che l'altezza finale dipenderà dall'altezza dell'elemento genitore.

Per utilizzare un numero percentuale per l'altezza, anche l'altezza del genitore deve essere determinata. L'unica opzione è l'elemento genitore/root "", Che consente un'altezza in percentuale di espandere i Div a tutto lo schermo.

Come impostare l'altezza: 100% per espandere i div a tutto lo schermo?

Impostare "Altezza: 100%"Funziona per espandere i Div all'altezza dello schermo, prova le istruzioni dichiarate.

Passaggio 1: crea un contenitore "div"

Inizialmente, crea un contenitore div con l'aiuto di ""Elemento e inserire un attributo di classe per identificare il contenitore particolare con l'aiuto del nome della classe. Quindi, incorporare un po 'di testo tra il tag:

Linuxhint Ltd UK

Si può vedere che il contenitore Div è stato creato correttamente:

Passaggio 2: Imposta “Altezza: 100%

Per espandere il Div all'altezza dello schermo, accedi alla pagina HTML e al corpo direttamente con il suo nome "html", E "corpo". Inoltre, accedi al contenitore Div utilizzando il nome della classe con selettore DOT come ".full-height":

html, corpo, .full-height
Altezza: 100%;
Min-Height: 100% !importante;

Qui:

• "altezza"La proprietà imposta l'altezza dell'elemento accessibile. In questo caso, l'altezza è impostata come "100%".
• Quindi, imposta il "Min-height" COME "100%"E applicare la regola importante su questa proprietà.
• IL "!importante"La regola viene utilizzata per impostare più importanza su una proprietà o un valore rispetto al suo valore normale.

Passaggio 3: modella il contenitore "div"

Utilizzato il nome e il selettore della classe come ".full-height"Per accedere al contenitore DAV e applicare le proprietà CSS di seguito:

.full-height
larghezza: 500px;
Background: RGB (154, 208, 240);
Testo-align: centro;
FONT: audace;
Font in stile: corsivo;

Secondo lo snippet di codice dato:

• "larghezza"Viene utilizzato per specificare la larghezza dell'elemento.
• "sfondo"Determina il colore del retro dell'elemento.
• "allineamento"La proprietà viene utilizzata per l'impostazione dell'allineamento del testo.
• "font"Viene utilizzato per specificare il carattere particolare del testo.
• "stile carattere"Determina lo stile del testo. Per fare ciò, il valore di questa proprietà è impostato come "corsivo".

Produzione

Si tratta di impostare l'altezza: 100% per lavorare per migliorare i div a tutto lo schermo.

Conclusione

Per utilizzare un numero percentuale per l'altezza, anche l'altezza del genitore deve essere determinata. L'unica eccezione è l'elemento radice "", Che consente a un'altezza percentuale di espandere i Div a tutto lo schermo. Per fare ciò, accedere agli elementi HTML, Body e Div e impostare il “altezza" COME "100%" E "Min-height" Anche "100%". Questo tutorial ha spiegato l'altezza: il 100% funziona per espandere il Div a tutto lo schermo.