Altura del cuerpo 100% mostrando barra de desplazamiento vertical

84

Por curiosidad, considerando el ejemplo siguiente, ¿por qué tener el margen en el div #container hace que aparezca una barra de desplazamiento vertical en el navegador? El contenedor tiene una altura mucho más pequeña que la altura del cuerpo, que se establece al 100%.

He establecido el relleno y los márgenes en 0 para todos los elementos excepto el #container. Tenga en cuenta que he omitido deliberadamente el posicionamiento absoluto en el div #container. En este caso, ¿cómo calcula el navegador la altura del cuerpo y cómo lo afecta el margen?

<!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>

Ejemplo también en JSFiddle

html css

— neodimio
fuente

Véase también stackoverflow.com/questions/34357434/…

— Matt Browne

65

Si pinta los fondos de htmly body(dándole a cada uno su propio color) , notará rápidamente que bodyse desplaza hacia abajo junto con #container, y #containerque no se desplaza en absoluto desde la parte superior body. Este es un efecto secundario del colapso del margen , que cubro en detalle aquí (aunque esa respuesta describe una configuración ligeramente diferente).

Es este comportamiento el que hace que aparezca la barra de desplazamiento, ya que ha declarado bodytener el 100% de la altura de html. Tenga en cuenta que la altura real de bodyno se ve afectada, ya que los márgenes nunca se incluyen en los cálculos de altura.

— BoltClock
fuente

¿Significa esto que las alturas de los elementos en una página se calculan comenzando con la ventana, luego el cuerpo, luego los elementos dentro / o encima del cuerpo? ¿Todos los porcentajes se convierten en valores px, pt o em?

— TMB

5

@TMB: una altura del 100% activada la htmlconvierte en el 100% de la ventana gráfica (el área de visualización de un navegador), y una altura del 100% activada la bodyconvierte en el 100% de su principal, que es html. Los porcentajes que siguen son siempre los de los antepasados de un elemento. Si no establece el 100% de altura en htmlo bodyentonces se comportan como cualquier otro elemento de bloque. Consulte w3.org/TR/CSS21/syndata.html#percentage-units para obtener más detalles. % sy ems eventualmente tendrán que convertirse a algún valor absoluto durante el renderizado, para que un navegador sepa exactamente qué tan grande o pequeño medir y renderizar cosas en la pantalla.

— BoltClock

1

@neodimio: Eso es correcto. Ambos htmly también se bodycomportan como cualquier otro elemento a nivel de bloque.

— BoltClock

8

Entonces, ¿cómo se debe arreglar? ¿ Flotando el contenedor como sugiere Michel ?

— Dan Dascalescu

1

@Daniel Albuschat: ¡Me siento honrado!

— BoltClock

19

Un poco tarde, pero quizás ayude a alguien.

Agregar float: left;a #containerelimina la barra de desplazamiento, como dice W3C:

• Los márgenes entre una caja flotante y cualquier otra caja no se colapsan (ni siquiera entre un flotador y sus hijos de entrada).

— Michel
fuente

18

Basado en la respuesta de @ BoltClock ♦, lo arreglé poniendo a cero el margen ...
así que

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

funciona donde el id "st-full-pg" se asigna a un div del panel (que además contenía el encabezado del panel y el cuerpo del panel)

— durasvchawla
fuente

3

agregar float:left;es bueno, pero interferirá con el posicionamiento horizontal central usandomargin:auto;

si sabe qué tan grande es su margen, puede tenerlo en cuenta en su porcentaje de altura usando calc:

height: calc(100% - 50px);

la compatibilidad con el navegador es buena, pero solo IE11 + https://caniuse.com/#feat=calc

— ben.tiberius.avery
fuente

¿Por qué 50px? Número mágico.

— Ivan Rubinson

"si sabe qué tan grande es su margen". Creo que es a lo que OP se refiere con 50px

— Clay

2

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

Esto funcionó para mi

— fjkjava
fuente

2

si tiene un pie de página, lo elimina

— Alexander

1

He encontrado una solución: agregar relleno: 1px 0; al cuerpo evita que aparezcan las barras de desplazamiento verticales

— Vikash Pal
fuente

0

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

Si desea eliminar el desplazamiento del cuerpo, agregue el siguiente estilo:

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

— lalit bhakuni
fuente

Esto solucionó mi problema en el que tenía 2 barras de desplazamiento verticales. Configurar html para tener overflow: hiddeny dejar el cuerpo solo solucionó eso. Tanto mi cuerpo como html tienen height: 100%.

— Karai17 de

0

Vi este problema solucionado antes, donde pones todo el contenido de bodyen un div llamado wrap. El estilo de envoltura debe establecerse en position: relative; min-height: 100%;. Para colocar #containerdiv 50px desde la parte superior e izquierda, coloque un div dentro de la envoltura con un relleno establecido en 50px. Los márgenes no funcionarán con wrap y el div que acabamos de crear, pero funcionarán en #containery todo lo que contiene.

aquí está mi solución en jsfiddle .

— TheZacher5645
fuente

0

Inspirado por @BoltClock, probé esto y funcionó, incluso cuando se aleja y se acerca.

Browser: Chrome 51

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

Supongo que bodyse redujo 20px.

— Evan Hu
fuente

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
fuente

0

Para aquellos que vienen aquí para obtener una respuesta más fácil de entender que incluso incluya ejemplos de código, esta respuesta (copiada de aquí ) es para usted.

No100px se requieren JavaScript ni valores de píxeles definidos (como ), solo CSS puro y porcentajes.

Si su div está sentado solo, height: 50%significará el 50% de la altura del cuerpo. Normalmente, la altura del cuerpo es cero sin ningún contenido visible, por lo que el 50% de eso es solo, bueno, cero.

Esta es la solución (basada en esto ) (descomente las backgroundlíneas para obtener una visualización del relleno):

/* 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>

Expandir fragmento

Lo anterior se escribió para que todavía quedara el relleno habitual. También podemos establecer las dimensiones del rojo diva 100%dejar de ver relleno en cada lado / fin. Si no desea este relleno, use este (aunque no se ve bien, le recomiendo que se quede con el primer ejemplo):

/* 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>

Expandir fragmento

— FluorescenteVerde5
fuente

-2

Agregar overflow: hidden;a html y cuerpo.

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

— NexusRex
fuente

42

esta solución elimina la barra de desplazamiento por completo. incluso en las páginas donde se necesita el desplazamiento

— Vil

1

Error tipográfico en la primera línea, desbordamiento: oculto

— Tim Grant

-9

Encontré una solución rápida: intente establecer la altura en 99,99% en lugar de 100%

— usuario1254226
fuente

Hay muchas razones por las que esta es una idea terrible, incluidas las diferencias de altura arbitrarias por ventana de usuario, y que los métodos de redondeo internos difieren según el navegador.

— Terra Ashley