Altura del cuerpo 100% mostrando barra de desplazamiento vertical

Question 1

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

Question 2

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.

Question 3

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).

Question 4

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)

Question 5

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

Question 6

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

Esto funcionó para mi

Question 7

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

Question 8

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

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

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

Question 9

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 .

Question 10

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.

Question 11

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

Question 12

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

Question 13

Agregar overflow: hidden;a html y cuerpo.

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

Question 14

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

Answer 1

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

Answer 2

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

Matt Browne

Answer 3

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

Answer 4

¿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

Answer 5

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

Answer 6

1

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

BoltClock

Answer 7

8

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

Dan Dascalescu

Answer 8

1

@Daniel Albuschat: ¡Me siento honrado!

BoltClock

Answer 9

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).

Answer 10

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)

Answer 11

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

Answer 12

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

Ivan Rubinson

Answer 13

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

Clay

Answer 14

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

Answer 15

2

si tiene un pie de página, lo elimina

Alexander

Answer 16

1

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

Vikash Pal
fuente

Answer 17

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

Answer 18

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

Answer 19

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 .

Answer 20

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.

Answer 21

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

Answer 22

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

Answer 23

-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

Answer 24

42

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

Vil

Answer 25

1

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

Tim Grant

Answer 26

-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

Answer 27

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

Altura del cuerpo 100% mostrando barra de desplazamiento vertical

Respuestas: