percentuale imbottitura non è sommando altezza totale correttamente

Così ho una pagina con html, header, body, div tag etc. Per il CSS, ho:percentuale imbottitura non è sommando altezza totale correttamente

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    width: 98%; 
 
    height: 98%; 
 
    padding: 1%; 
 
}

Il mio problema c'è una barra di scorrimento sul lato destro del browser. Significa che l'altezza è troppo alta?

html è impostato su 100% altezza e larghezza. Il body ha una spaziatura 1% che aggiunge 1% in alto, a destra, in basso ea sinistra, quindi questo è width - 2 = 98 e height - 2 = 98.

Quindi imbottitura 1% altezza 98% e larghezza 98%. Come posso ottenere una barra di scorrimento?

fonte

2015-12-24 SebastianZdroana

Questo è interessante! Succede anche se aggiungi 'ridimensionamento della casella: border-box;' per 'body'? – Johannes

@Johannes non ho idea di cosa faccia il box-dimensionamento ma l'ho risolto facendo quello che josh ha detto, usa vh e vw – SebastianZdroana

Non funziona come previsto perché il valore basato su percentuale padding è relativo alla larghezza dell'elemento. Se ridimensionate il browser in modo che l'altezza sia maggiore della larghezza, noterete che la barra di scorrimento scompare (perché lo padding è relativo alla larghezza).

Secondo la specifica:

8 Box model - 8.4 Padding properties:

La percentuale è calcolata rispetto alla larghezza del blocco contenitore del riquadrato generato, anche per 'padding-top' e 'padding-bottom'. Se la larghezza del blocco contenitore dipende da questo elemento, il layout risultante non è definito in CSS 2.1.

Una possibile work-around è quello di utilizzare le unità finestra-percentuali come vw al fine di rendere la percentuale relativa alla larghezza:

body { 
    width: 98%; 
    height: 98%; 
    padding: 1vh 1vw; 
}

Si potrebbe anche aggiungere box-sizing: border-box di includere il padding nel dimensioni dell'elemento:

body { 
    width: 100%; 
    height: 100%; 
    padding: 1%; 
    box-sizing: border-box; 
}

fonte

2015-12-24 02:51:31

hai davvero bisogno di definire larghezza e altezza se aggiungi il ridimensionamento della scatola? –

vedo grazie, è stato strano vedere come il buon senso ti dice che l'impostazione html al 100% w/h imposta html per adattarsi all'intero schermo, quindi se imposti il corpo con una spaziatura dell'1% ci vuole 1% p/h da html e lo aggiunge come imbottitura al corpo e dando corpo 98% w/h si riempie per il resto della pagina – SebastianZdroana

Ricorda inoltre che il corpo viene fornito con 8 pixel di margine fuori dalla scatola. –

In CSS, margine percentuale e imbottitura è relativo alla larghezza del contenitore, come Josh Crozier ha alrea Dy ha spiegato che nella sua risposta.

Suggerisco di impostare la percentuale di riempimento sull'elemento <html>, la radice del documento, più box-sizing: border-box; insieme, ti dà lo stesso spazio intorno.

border-box valori di lunghezza e percentuali per la larghezza e l'altezza (e rispettive min/max proprietà) su questo elemento determinano la scatola confine dell'elemento. Cioè, qualsiasi spaziatura o bordo specificato su l'elemento è disposto e disegnato all'interno di questa larghezza specificata e altezza . La larghezza e l'altezza del contenuto vengono calcolate sottraendo il bordo e le dimensioni di riempimento dei rispettivi lati dalle proprietà di larghezza e altezza specificate per .- W3C

html { 
 
    background: silver; 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    padding: 5%; 
 
} 
 
body { 
 
    background: pink; 
 
    height: 100%; 
 
    margin: 0; 
 
}

fonte

2015-12-24 03:29:12 Stickers

cosa fa esattamente il dimensionamento della scatola, leggo su w3s che dice al browser quali sono le proprietà di dimensionamento, tuttavia non capisco cosa intendo esattamente – SebastianZdroana

Fondamentalmente, ciò che fa 'border-box' è - l'elemento si attaccherà con 'width' e' height' che imposti, indipendentemente dai valori di 'padding' e' border'. – Stickers

percentuale imbottitura non è sommando altezza totale correttamente

risposta

Problemi correlati