html - una - Altura del cuerpo 100% con barra de desplazamiento vertical
tabla con header fijo y scroll horizontal y vertical (11)
Agregar overflow: hidden; a html y cuerpo.
html, body {
height: 100%;
overflow: hidden;
}
Por curiosidad, considerando el siguiente ejemplo, ¿por qué tener el margen en el #container div causa que aparezca una barra de desplazamiento vertical en el navegador? El contenedor es mucho más pequeño en altura que la altura del cuerpo que se establece en 100%.
Establecí 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 #container div. En este caso, ¿cómo calcula el navegador la altura del cuerpo y cómo lo está afectando 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
Basado en la respuesta de @ BoltClock ♦, lo solucioné poniendo a cero el margen ...
asi que
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
funciona donde id "st-full-pg" se asigna a un panel div (que además contiene panel-heading y panel-body)
Encontré una solución rápida: pruebe establecer la altura en 99.99% en vez de 100%
He encontrado una solución: agregar relleno: 1px 0; al cuerpo evita que aparezcan barras de desplazamiento verticales
Inspirado por @BoltClock, probé esto y funcionó, incluso cuando alejé y encendí.
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
Supongo que el body fue desplazado 20px.
Un poco tarde, pero tal vez ayuda a alguien.
Agregar float: left; to #container elimina la barra de desplazamiento, como dice el W3C:
• Los márgenes entre una caja flotante y cualquier otra caja no colapsan (ni siquiera entre un flotador y sus niños en flujo).
Vi este problema solucionado antes de que pusieras todo el contenido del body en un div llamado wrap. El estilo de ajuste debe establecerse en position: relative; min-height: 100%; position: relative; min-height: 100%; . Para colocar #container div 50px desde la parte superior e izquierda, coloque un div dentro del wrap con un conjunto de relleno de 50px. Los márgenes no funcionarán con wrap y div que acabamos de #container , pero funcionarán en #container y todo lo que #container .
agregando float:left; es bueno, pero interferirá con el posicionamiento horizontal central usando margin:auto;
si sabes qué tan grande es tu margen, puedes contabilizarlo en tu porcentaje de altura usando calc:
height: calc(100% - 50px);
la compatibilidad con el navegador es buena, pero solo IE11 + https://caniuse.com/#feat=calc
Si pinta los fondos de html y body (dándole a cada uno su propio color) , notará rápidamente que el body se está desplazando hacia abajo junto con #container , y #container sí mismo no está desplazado en absoluto desde la parte superior del body . Este es un efecto secundario del colapso del margen , que cubro en detalle here (aunque esa respuesta describe una configuración ligeramente diferente).
Es este comportamiento el que está causando que aparezca la barra de desplazamiento, ya que has declarado que el body tiene el 100% de la altura de html . Tenga en cuenta que la altura real del body no se ve afectada, ya que los márgenes nunca se incluyen en los cálculos de altura.
html, body {
height: 100%;
overflow: hidden;
}
Si desea eliminar el desplazamiento del cuerpo, agregue el siguiente estilo:
body {
height: 100%;
overflow: hidden;
}
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
Esto funcionó para mí