Altezza del corpo 100% con visualizzazione della barra di scorrimento verticale

86

Per curiosità, considerando l'esempio sotto, perché avere il margine sul div #container fa apparire una barra di scorrimento verticale nel browser? Il contenitore è molto più piccolo in altezza rispetto all'altezza del corpo che è impostata al 100%.

Ho impostato il padding e i margini su 0 per tutti gli elementi tranne il #container. Nota che ho deliberatamente omesso il posizionamento assoluto sul div #container. In questo caso come il browser calcola l'altezza del corpo e come influisce il margine?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

Esempio anche su JSFiddle

html css

— neodimio
fonte

Vedi anche stackoverflow.com/questions/34357434/…

— Matt Browne

65

Se dipingi gli sfondi di htmle body(dando a ciascuno il proprio colore) , noterai rapidamente che bodyviene spostato verso il basso insieme a #container, e di per #containersé non è affatto spostato dall'alto body. Questo è un effetto collaterale del collasso del margine , che tratterò in dettaglio qui (sebbene quella risposta descriva una configurazione leggermente diversa).

È questo comportamento che fa apparire la barra di scorrimento, dal momento che hai dichiarato bodydi avere il 100% dell'altezza di html. Si noti che l'altezza effettiva di bodynon viene modificata, poiché i margini non vengono mai inclusi nei calcoli dell'altezza.

— BoltClock
fonte

Ciò significa che le altezze degli elementi di una pagina vengono calcolate a partire dalla finestra, quindi dal corpo, quindi dagli elementi all'interno / o sopra il corpo? Tutte le percentuali vengono convertite in valori px, pt o em?

— TMB

5

@TMB: Un'altezza del 100% su htmlrende il 100% del viewport (l'area di visualizzazione di un browser) e un'altezza del 100% su bodyrende il 100% del suo genitore, che è html. Tutte le percentuali che seguono sono sempre quelle degli antenati di un elemento. Se non si imposta l'altezza del 100% su htmlo, bodysi comportano come qualsiasi altro elemento di blocco. Vedi w3.org/TR/CSS21/syndata.html#percentage-units per i dettagli. % se ems alla fine dovranno essere tutti convertiti in un valore assoluto durante il rendering, in modo che un browser sappia esattamente quanto grande o piccolo misurare e rendere le cose sullo schermo.

— BoltClock

1

@neodymium: Esatto. Entrambi htmle si bodycomportano come qualsiasi altro elemento a livello di blocco.

— BoltClock

8

Quindi come dovrebbe essere riparato? Facendo fluttuare il contenitore come suggerisce Michel ?

— Dan Dascalescu

1

@Daniel Albuschat: sono onorato!

— BoltClock

20

Basandomi sulla risposta di @ BoltClock ♦, l'ho risolto azzerando il margine ...
quindi

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

funziona dove id "st-full-pg" è assegnato a un div del pannello (che conteneva ulteriormente intestazione e corpo del pannello)

— harshvchawla
fonte

19

Un po 'tardi, ma forse aiuta qualcuno.

L'aggiunta float: left;a #containerrimuove la barra di scorrimento, come dice W3C:

• I margini tra un riquadrato flottato e qualsiasi altro riquadrato non collassano (nemmeno tra un riquadrato flottante e i suoi figli in entrata).

— Michel
fonte

3

html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

Questo ha funzionato per me

— fjkjava
fonte

2

se hai un piè di pagina, lo rimuove

— Alexander

3

l'aggiunta float:left;è piacevole, ma interferirà con il posizionamento orizzontale centrale utilizzandomargin:auto;

se sai quanto è grande il tuo margine, puoi tenerne conto nella percentuale di altezza utilizzando calc:

height: calc(100% - 50px);

il supporto del browser è buono, ma solo IE11 + https://caniuse.com/#feat=calc

— ben.tiberius.avery
fonte

Perché 50px? Numero magico.

— Ivan Rubinson

"se sai quanto è grande il tuo margine." Credo che sia ciò a cui si riferisce OP con il 50px

— Clay

1

html, body {
    height: 100%;
    overflow: hidden;
}

Se vuoi rimuovere lo scorrimento del corpo aggiungi il seguente stile:

body {
    height: 100%;
    overflow: hidden;
}

— lalit bhakuni
fonte

Questo ha risolto il mio problema in cui avevo 2 barre di scorrimento verticali. L'impostazione di html per avere overflow: hiddene lasciare solo il corpo ha risolto il problema. Sia il mio corpo che HTML hanno height: 100%.

— Karai17

1

Ho trovato una soluzione: aggiungi padding: 1px 0; to body impedisce la visualizzazione delle barre di scorrimento verticali

— Vikash Pal
fonte

0

Ho visto questo problema risolto prima di inserire tutto il contenuto di bodyin un div chiamato wrap. Lo stile di Wrap dovrebbe essere impostato su position: relative; min-height: 100%;. Per posizionare il #containerdiv 50px dall'alto e da sinistra, metti un div all'interno dell'involucro con un padding impostato su 50px. I margini non funzioneranno con wrap e il div che abbiamo appena creato, ma funzioneranno in #containere tutto ciò che contiene.

ecco la mia correzione su jsfiddle .

— TheZacher5645
fonte

0

Ispirato da @BoltClock, l'ho provato e ha funzionato, anche con lo zoom avanti e indietro.

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

Immagino sia bodystato spostato verso il basso di 20 px.

— Evan Hu
fonte

0

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

— Walex996
fonte

0

Per coloro che vengono qui per una risposta più facile da capire che include anche esempi di codice, questa risposta (copiata da qui ) è per te.

Non100px sono richiesti JavaScript o valori di pixel definiti (come ), solo CSS e percentuali puri.

Se il tuo div è seduto da solo, height: 50%significherà il 50% dell'altezza del corpo. Normalmente, l'altezza del corpo è zero senza alcun contenuto visibile, quindi il 50% è solo, beh, zero.

Questa è la soluzione (basata su questo ) (rimuovere il commento dalle backgroundrighe per ottenere una visualizzazione del padding):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Espandi lo snippet

Quanto sopra è stato scritto in modo che ci fosse ancora la solita imbottitura. È possibile impostare le dimensioni del rosso divsu 100%e vedere ancora l'imbottitura su ciascun lato / estremità. Se non vuoi questa imbottitura, usa questa (anche se non sembra carina, ti consiglio di restare con il primo esempio):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Espandi lo snippet

— Verde fluorescente 5
fonte

0

Per me funziona:

html,
body {
    height: 100%;
    height: -webkit-fill-available; // Chrome
}

// Firefox
@-moz-document url-prefix() {
    body {
        box-sizing: border-box; 
        margin: 0;
        padding: 1px;
    }
}

-2

Aggiungi overflow: hidden;a html e al corpo.

html, body {
  height: 100%;
  overflow: hidden;
}

— NexusRex
fonte

42

questa soluzione rimuove completamente la barra di scorrimento. anche nelle pagine in cui è necessario lo scorrimento

— Vil

-9

Ho trovato una soluzione rapida: prova a impostare l'altezza al 99,99% anziché al 100%

— user1254226
fonte

Ci sono molte ragioni per cui questa è un'idea terribile, comprese differenze arbitrarie di altezza per finestra utente e che i metodi di arrotondamento interni differiscono a seconda del browser.

— Terra Ashley