posicionamiento - texto en una sola linea html
Extender div al final de la página(solo HTML y CSS) (2)
Es un problema muy simple, pero parece que no puedo encontrar una solución adecuada en línea. Quiero tener una lista de elementos en flujo natural con el último elemento extendido al final de la página. Así que si tengo
<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>
Necesito la bottom elemento para extenderse desde la parte inferior de la parte top a la parte inferior de la página. Cualquier solución que use solo html y css es bienvenida, y puede agregar divs de contenedores o cualquier cosa, siempre que pueda obtener un cambio de tamaño dinámico del div bottom
EDITAR: no quiero codificar ningún valor para la bottom , porque quiero que la bottom ajuste si se cambia el tamaño de la top
Aquí hay un violín para todas sus necesidades: http://jsfiddle.net/8QnLA/
Solución: # 1: tablas css:
html, body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
#top, #bottom {
width: 100%;
background: yellow;
display: table-row;
}
#top {
height: 50px;
}
#bottom {
background: lightgrey;
height: 100%;
}
html, body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
#top, #bottom {
width: 100%;
background: yellow;
display: table-row;
}
#top {
height: 50px;
}
#bottom {
background: lightgrey;
height: 100%;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>
Solución # 2: Usar unidades de calc y viewport
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
min-height: calc(100vh - 50px);
}
body {
margin: 0;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
min-height: calc(100vh - 50px);
}
Where `min-height: calc(100vh - 50px);` means:
''Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.''
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>
Solución # 3 - Flexbox
body {
margin: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
flex: 1;
}
body {
margin: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
flex: 1;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>
Establecer la altura de html, body a 100% . Luego, puede establecer la altura del último <div> en 100% y será tan alta como la ventana. Como probablemente no desee el desplazamiento, puede configurar el overflow: hidden en el html, body .