Hvorfor fungerer ikke høyden 100% for å utvide divene til skjermhøyden?

I HTML kan brukeren opprette en eller flere containere ved hjelp av "”Eller“”Elementer. Videre tillater CSS brukeren å endre beholderens bredde og høyde i henhold til deres behov. Høyden: 100% fungerer imidlertid ikke fordi det avhenger av overordnede element. For å gjøre det, sett først overordnede elementhøyde, og sett deretter divhøyden.

Denne oppskrivningen vil forklare høyden: 100% for å utvide divene til fullskjermhøyde.

Hvorfor jobber ikke 100% for å utvide divene til skjermhøyden?

Hvis brukere vil bruke stilregelen "Høyde: 100%”For å lage en DIV -beholder på den fulle høyden på skjermen, fungerer den rett og slett ikke siden prosentandelen (%) er en relativ enhet, noe som betyr at den endelige høyden vil avhenge av høyden på overordnede element.

For å bruke et prosentandel for høyde, må foreldrenes høyde også bestemmes. Det eneste alternativet er foreldre/rotelementet “”, Som tillater en høyde i prosent å utvide divene til fullskjerm.

Slik angir du høyde: 100% for å utvide divene til fullskjerm?

Å sette "Høyde: 100%”Fungerer for å utvide divene til skjermhøyden, prøv de uttalte instruksjonene.

Trinn 1: Lag en "div" -beholder

Opprinnelig lage en div -container ved hjelp av "”Element og sett inn et klasseattributt for å identifisere den aktuelle beholderen ved hjelp av klassenavnet. Legg inn litt tekst mellom taggen:

Linuxhint Ltd UK

Det kan sees at DIV -beholderen er opprettet med hell:

Trinn 2: Sett “Høyde: 100%

For å utvide Div til skjermhøyden, får du tilgang til HTML -siden og kroppen direkte med navnet “html”, Og“kropp”. Få tilgang til DIV -beholderen ved å bruke klassenavnet med DOT -velgeren som “.full høyde”:

html, kropp, .fullhøyde
Høyde: 100%;
Min-Height: 100% !viktig;

Her:

• “høyde”Eiendom setter høyden på det tilgjengelige elementet. I dette tilfellet er høyden satt som “100%“.
• Sett deretter “Min-Height" som "100%”Og bruk den viktige regelen på denne eiendommen.
• “!viktig”Regel brukes for å sette større betydning for en eiendom eller en verdi enn normal verdi.

Trinn 3: Style "Div" -beholderen

Benyttet klassenavnet og velgeren som “.full høyde”For å få tilgang til DIV-beholderen og bruke de under-tatte CSS-egenskapene:

.fullhøyde
Bredde: 500px;
Bakgrunn: RGB (154, 208, 240);
tekst-align: sentrum;
Font: fet;
Font-stil: kursiv;

I følge den gitte kodebiten:

• “bredde”Brukes til å spesifisere elementets bredde.
• “bakgrunn”Bestemmer fargen på elementets bakside.
• “Tekstalign”Eiendom brukes til å stille inn justering av teksten.
• “Font”Brukes til å spesifisere den spesielle skrifttypen til teksten.
• “fontstil”Bestemmer tekstenes stil. For å gjøre det settes verdien av denne egenskapen som "kursiv”.

Produksjon

Det handler om å sette høyden: 100% for å jobbe for å forbedre divene til fullskjerm.

Konklusjon

For å bruke et prosentandel for høyde, må foreldrenes høyde også bestemmes. Det eneste unntaket er rotelementet “”, Som tillater en prosentvis høyde å utvide divene til fullskjerm. For å gjøre det, får du tilgang til HTML-, Body og Div -elementene og angi “høyde" som "100%”Og“Min-Height”Også"100%”. Denne opplæringen har forklart om høyden: 100% jobber for å utvide div til fullskjerm.