EDITAR: Parece que Fiddle no está cargando Twitter Bootstrap correctamente, por lo que te sugiero que copies y pegues mi código HTML y CSS en un archivo .html en blanco en tu escritorio y que resuelvas problemas con ese archivo. Recuerde incluir correctamente Twitter Bootstrap 3 (el CDN se encuentra en mi código HTML a continuación) porque el problema solo aparece cuando se incluye Bootstrap.
Aquí está mi violín / código: http://jsfiddle.net/maLog1sm/
Y aquí está el código que está en el violín:
HTML:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<div class="container-fluid headerRow">
<div class="row headerRow">
<div class="col-md-12 navContainer">
<ul class="nav nav-pills nav-stacked custom-nav-pills">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
<li><a href="#"> Portfolio</a></li>
</ul>
</div>
<div class="col-md-10 bodyColumn">
<div class="footer"><p>Footer</p></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
.bodyColumn {
height: 100%;
overflow: auto;
}
.headerRow {
height: 100%;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0%;
}
Utiliza bootstrap 3. Me pregunto por qué está allí la barra de desplazamiento vertical y cómo puedo eliminarla (en el violín, la barra de desplazamiento aparece si la ventana del navegador está o no reducida, pero en mi sitio web real, solo aparece cuando la ventana está reducida. Por encogido, me refiero cuando hago que el ancho de la ventana del navegador sea más pequeño que el ancho máximo).
Respuestas
3 para la respuesta № 1Problema con tu código eres tú quien estás dandoaltura 100% a HTML y BODY, está bien, no importa. También le has dado la misma altura: 100% a las 2 clases (dos div) que hay dentro, ahora HTML no puede dar el 100% a ambas div. interna. Puedes altura de mención: auto a la clase que ajustará la altura según el contenido disponible.
Aquí Trate de reemplazar la altura: 100% por altura: auto; para la clase .bodyColumn, resolverá su problema
CSS : Actualizado
.bodyColumn {
position:absolute !important;
bottom:0%;
height: auto;
overflow: auto;
}
.headerRow {
height: 100%;
overflow: auto;
}
.footer {
display:block;
}
MANIFESTACIÓN : Actualizado
Explicación: Aquí el primer div headerRow toma el conjuntoaltura (100% altura) de la página, ahora para el div bodyColumn es posterior a la anterior, por lo que se le da una altura del 100%, por lo que se ve obligado a hacerlo pero su margen: 0 comienza desde donde termina el contenido (aquí está su navContainer div)
1 para la respuesta № 2
Creo que el problema es con las clases y estilos definidos en html.
En el caso anterior, está teniendo clase headerRowA los padres y uno de sus hijos. Y otro niño está teniendo clase bodyColumn. Ambos elementos que tienen el estilo de altura como 100% intentan tomar el 100% de la altura del padre y se desbordan como automáticos, el padre se desplazará en caso de desbordamiento.
He intentado trabajar en tu violín y eliminar headerRow del elemento hijo soluciona tu problema.
1 para la respuesta № 3
Intenta cambiar tu height:100% propiedad en bodyColumn y headerRow a min-height:100% Me gusta esto:
.bodyColumn {
min-height: 100%;
overflow: auto;
}
.headerRow {
min-height: 100%;
overflow: auto;
}
Deja la altura de tu cuerpo como height:100% aunque. No cambie la altura de los padres a min-height.