html - tipos - Hacer contenedor div llena todo el diseño con el pie de página adhesivo
tipos de divs html (3)
Mientras trabaje en porcentaje, su sitio responderá. Entonces, usando min-height: 100% resuelve tu problema, que es solo CSS. Y si no quieres Javascript involucrado aquí, ese es el camino a seguir.
Ver la demostración JS Fiddle . Su contenedor está llenando toda la página.
#main-container {
min-height: 100%;
background: #fff;
}
Estoy creando un nuevo diseño para un sitio web personal.
Estoy usando Twitter Bootstrap 3 , y mi diseño inicial se realizó usando como ejemplo la muestra "Bootstrap with pie de página fijo" ( http://getbootstrap.com/examples/sticky-footer-navbar/ )
Este es mi html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
El CSS de pie de página adhesivo:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
Y el estilo personalizado para mi diseño:
body {
/* Body''s background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I''ll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
Este código genera este diseño:
Pero, como puede ver, el div #main-container no crece hasta el final del diseño. El div mantiene con la altura de su contenido.
Lo que quiero es que este div siempre llene toda la página, así:
Muchas soluciones en Internet me dijeron que debía fijar min-height a algún valor probado, pero de esta manera no podría mantener mi sitio web en buen estado (es muy importante para mí mantener mi diseño siempre receptivo, esa es la razón principal por la que utilizo Bootstrap 3). )
Otra solución es calcular la altura del div con javascript. Personalmente, no me gusta esta solución. Me gustaría poder resolver esto solo usando CSS.
Alguien sabe cómo resolver este problema?
Si desea tener un pie de página adhesivo Y un contenedor principal # lleno, debe modificar su estructura. Primero, déjame explicarte por qué no puedes resolver esto con el método de pie de página adhesivo que estás usando en este momento:
Configuración de la altura del # contenedor principal: 100% o altura mínima: 100% no funcionará porque no puede usar la altura del porcentaje con un elemento primario cuya altura no está estrictamente definida. Tenga en cuenta que en la respuesta aceptada actualmente esto se considera un error, pero no lo es, es solo la forma en que se supone que debe funcionar. En su ejemplo, la altura de # wrap está establecida en auto, por lo que la altura de # main-container simplemente ignora el 100% y se reduce a automático.
Para tener tanto el pie de página adhesivo como el contenedor principal REAL # de altura completa (en lugar de simular con el fondo), debe usar display:table y display:table-row . Esto funciona porque cuando utilizas display:table , height:100% funciona igual que tu min-height:100% normal min-height:100% y la display:table-row s inside siempre se estirará para usar todo el espacio vertical disponible.
NOTA: esto es diferente al uso de tablas html, porque en este caso no necesita hinchar su marcado con etiquetas no semánticas, como verá en el siguiente ejemplo.
Aquí está el código HTML de ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
Y aquí está el CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
Creo que min-height no funciona debido a un error informado. Mira esto: .com/questions/8468066 .
Una forma fácil de crear la ilusión de que # main-container crece hasta el final, es establecer el color de fondo de # wrap con el mismo valor que # main-container''s.