css - tamaño - div pantalla completa
Haz un div lleno de la altura del espacio de pantalla restante (30)
Descargo de responsabilidad: la respuesta aceptada da la idea de la solución, pero me parece un poco abultada con un envoltorio innecesario y reglas css. A continuación se muestra una solución con muy pocas reglas css.
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport''s height */
}
main {
flex: 1; /* this will make the container take the free space */
}
La solución anterior utiliza unidades de vista y http://caniuse.com/#feat=flexbox , y por lo tanto es IE10 +, siempre que use la sintaxis antigua para IE10.
Codepen para jugar: enlace a codepen
O este, para aquellos que necesitan que el contenedor principal sea desplazable en caso de un contenido desbordado: enlace a codepen
Actualmente estoy trabajando en una aplicación web, donde quiero que el contenido llene la altura de toda la pantalla.
La página tiene un encabezado, que contiene un logotipo e información de cuenta. Esto podría ser una altura arbitraria. Quiero que la división de contenido llene el resto de la página al final.
Tengo un encabezado div y un contenido div . En este momento estoy usando una tabla para el diseño así:
CSS y HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
La altura completa de la página se rellena y no se requiere desplazamiento.
Para cualquier cosa dentro del contenido div, configuración top: 0; Lo pondré justo debajo de la cabecera. A veces, el contenido será una tabla real, con su altura establecida en 100%. Poner header dentro del content no permitirá que esto funcione.
¿Hay alguna manera de lograr el mismo efecto sin usar la table ?
Actualizar:
Los elementos dentro de la div contenido también tendrán alturas establecidas en porcentajes. Así que algo al 100% dentro de la div lo llenará hasta el fondo. Al igual que dos elementos al 50%.
Actualización 2:
Por ejemplo, si el encabezado ocupa el 20% de la altura de la pantalla, una tabla especificada al 50% dentro de #content ocuparía el 40% del espacio de la pantalla. Hasta ahora, envolver todo en una tabla es lo único que funciona.
Enfoque solo de CSS (si la altura es conocida / fija)
Cuando desea que el elemento central se extienda verticalmente en toda la página, puede usar calc() que se introduce en CSS3.
Suponiendo que tenemos un header altura fija y elementos de footer y queremos que la etiqueta de section tome toda la altura vertical disponible ...
Marcado asumido
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
Así que tu CSS debería ser
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
Así que aquí, lo que estoy haciendo es sumar la altura de los elementos y deducir del 100% usando la función calc() .
Solo asegúrate de usar height: 100%; para los elementos padres.
Actualización 2015: el enfoque flexbox
Hay otras dos respuestas que mencionan brevemente flexbox ; sin embargo, eso fue hace más de dos años y no proporcionan ningún ejemplo. La especificación para flexbox definitivamente se ha establecido ahora.
Nota: Aunque la especificación de diseño de cuadros flexibles de CSS se encuentra en la etapa de recomendación del candidato, no todos los navegadores lo han implementado. La implementación de WebKit debe tener el prefijo -webkit-; Internet Explorer implementa una versión anterior de la especificación, con el prefijo -ms-; Opera 12.10 implementa la última versión de la especificación, sin prefijo. Consulte la tabla de compatibilidad de cada propiedad para obtener un estado de compatibilidad actualizado.
(tomado de flexbox )
Todos los principales navegadores y IE11 + soportan Flexbox. Para IE 10 o más, puede usar la cuña FlexieJS.
Para comprobar la compatibilidad actual, también puede ver aquí: http://caniuse.com/#feat=flexbox
Ejemplo de trabajo
Con flexbox puede cambiar fácilmente entre cualquiera de sus filas o columnas que tengan dimensiones fijas, dimensiones de tamaño de contenido o dimensiones de espacio restante. En mi ejemplo, he configurado el encabezado para que se ajuste a su contenido (según la pregunta de los OP), agregué un pie de página para mostrar cómo agregar una región de altura fija y luego configurar el área de contenido para llenar el espacio restante.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
En el CSS anterior, la propiedad flex muestra las propiedades flex-grow , flex-shrink y flex-basis para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una flexbox .
¿Por qué no simplemente así?
html, body {
height: 100%;
}
#containerInput {
background-image: url(''../img/edit_bg.jpg'');
height: 40%;
}
#containerControl {
background-image: url(''../img/control_bg.jpg'');
height: 60%;
}
¿Le da una altura a html y body (en ese orden) y luego le da una altura a sus elementos?
Funciona para mi
¿Qué tal si simplemente usa vh que significa view height en CSS ...
Mira el fragmento de código que he creado para ti a continuación y ejecútalo:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}
<div class="full-height">
</div>
También, mira la imagen debajo que creé para ti:
En lugar de usar tablas en el marcado, puede usar tablas CSS.
Margen
<body>
<div>hello </div>
<div>there</div>
</body>
(Relevante) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
Algunas ventajas de este método son:
1) Menos marcado
2) El marcado es más semántico que las tablas, porque no se trata de datos tabulares.
3) El soporte del navegador es muy bueno : IE8 +, todos los navegadores modernos y dispositivos móviles ( caniuse )
Solo para completar, aquí están los elementos Html equivalentes a las propiedades de css para el modelo de tabla CSStable { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Encontré una solución bastante simple, porque para mí era solo un problema de diseño. Quería que el resto de la página no fuera blanca debajo del pie rojo. Así que puse el color de fondo de las páginas en rojo. Y los contenidos en color de fondo a blanco. Con la altura del contenido establecida en, por ejemplo 20em o 50% una página casi vacía no dejará en rojo toda la página.
Hay un montón de respuestas ahora, pero encontré usando la altura: 100vh; para trabajar en el elemento div que necesita llenar todo el espacio vertical disponible.
De esta manera, no necesito jugar con la pantalla o el posicionamiento. Esto fue útil cuando usé Bootstrap para hacer un panel en el que tenía una barra lateral y una principal. Quería que el principal se estirara y llenara todo el espacio vertical para poder aplicar un color de fondo.
div {
height: 100vh;
}
Compatible con IE9 y superior: haga clic para ver el enlace
La publicación original hace más de 3 años. Supongo que muchas personas que acuden a esta publicación como yo están buscando una solución de diseño similar a una aplicación, por ejemplo, un encabezado fijo, pie de página y contenido de altura completa que ocupan la pantalla del resto. Si es así, esta publicación puede ayudar, funciona en IE7 +, etc.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Y aquí hay algunos fragmentos de ese post:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}
<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>
Lo que funcionó para mí (con un div dentro de otro div y asumo en todas las demás circunstancias) es establecer el relleno inferior al 100%. Es decir, agregue esto a su css / hoja de estilo:
padding-bottom: 100%;
Luché con esto por un tiempo y terminé con lo siguiente:
Ya que es fácil hacer que el contenido DIV tenga la misma altura que el padre, pero aparentemente es difícil hacerlo con la altura del padre menos la altura del encabezado, decidí hacer que el contenido sea de altura completa, pero colocarlo absolutamente en la esquina superior izquierda y luego definir un relleno para la parte superior que tiene la altura de la cabecera. De esta manera, el contenido se muestra claramente debajo del encabezado y llena todo el espacio restante:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
Ninguna de las soluciones publicadas funciona cuando necesita el div inferior para desplazarse cuando el contenido es demasiado alto. Aquí hay una solución que funciona en ese caso:
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Para aplicaciones móviles solo uso VH y VW
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
Demostración - https://jsfiddle.net/u763ck92/
Prueba esto
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Puede usar display: table para dividir el área en dos elementos (encabezado y contenido), donde el encabezado puede variar en altura y el contenido llena el espacio restante. Esto funciona con toda la página, así como cuando el área es simplemente el contenido de otro elemento posicionado con la position establecida en relative , absolute o fixed . Funcionará siempre que el elemento padre tenga una altura distinta de cero.
Vea este violín y también el código a continuación:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn''t have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Realmente no hay una forma de navegador de sonido para hacer esto en CSS. Suponiendo que su diseño tiene complejidades, necesita usar JavaScript para establecer la altura del elemento. La esencia de lo que necesitas hacer es:
Element Height = Viewport height - element.offset.top - desired bottom margin
Una vez que puede obtener este valor y establecer la altura del elemento, debe adjuntar los controladores de eventos tanto a la ventana onload como a onresize para poder activar su función de cambio de tamaño.
Además, suponiendo que su contenido pueda ser más grande que la ventana gráfica, deberá configurar el desbordamiento para desplazarse.
Se podría hacer puramente mediante CSS usando vh :
#page
{
display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent
{
float:left; width:100%; display:block;
}
#content
{
float:left; width:100%; height:100%; display:block; overflow:scroll;
}
y el HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
Lo comprobé, funciona en todos los principales navegadores: Chrome , IE y FireFox
Si puede lidiar con no admitir navegadores antiguos (es decir, MSIE 9 o más antiguos), puede hacerlo con el http://caniuse.com/#feat=flexbox que ya es W3C CR. Ese módulo también permite otros buenos trucos, como reordenar contenido.
Desafortunadamente, MSIE 9 o menor no admite esto y debe usar el prefijo de proveedor para la propiedad CSS para cada navegador que no sea Firefox. Esperemos que otros proveedores también eliminen el prefijo pronto.
Otra opción sería el diseño de cuadrícula de CSS, pero eso tiene aún menos soporte de las versiones estables de los navegadores. En la práctica, solo MSIE 10 soporta esto.
También he estado buscando una respuesta para esto. Si tiene la suerte de poder apuntar a IE8 y superiores, puede usar display:table y valores relacionados para obtener las reglas de representación de tablas con elementos a nivel de bloque, incluida la div.
Si tiene más suerte y sus usuarios utilizan navegadores de primer nivel (por ejemplo, si esta es una aplicación de intranet en las computadoras que controla, como lo es mi último proyecto), ¡puede usar el nuevo Flexible Box Layout en CSS3!
Tuve el mismo problema pero no pude hacer funcionar la solución con flexboxes arriba. Así que creé mi propia plantilla, que incluye:
- un encabezado con un elemento de tamaño fijo
- un pie de página
- Una barra lateral con una barra de desplazamiento que ocupa la altura restante.
- contenido
Utilicé flexboxes, pero de una manera más sencilla, utilizando solo las propiedades de visualización: flex y flex-direction: row | column :
Utilizo angular y quiero que los tamaños de mis componentes sean el 100% de su elemento principal.
La clave es establecer el tamaño (en porcentajes) de todos los padres para limitar su tamaño. En el siguiente ejemplo, myapp height tiene el 100% de la ventana gráfica.
El componente principal tiene el 90% de la ventana gráfica, porque el encabezado y el pie de página tienen el 5%.
Publiqué mi plantilla aquí: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
Una solución simple, usando flexbox:
<div>header</div>
<div class="content"></div>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
Una solución alternativa, con un div centrado dentro del contenido div
Utilizado: height: calc(100vh - 110px);
código:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>
Vincent, contestaré de nuevo usando tus nuevos requerimientos. Como no le importa que el contenido se oculte si es demasiado largo, no necesita flotar el encabezado. Simplemente coloque el desbordamiento oculto en las etiquetas html y body, y establezca #content height en 100%. El contenido siempre será más largo que la vista por la altura del encabezado, pero estará oculto y no causará barras de desplazamiento.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
Solo definiendo el body con display:grid y las grid-template-rows usando auto y la propiedad de valor fr .
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
CSS3 Simple Way
height: calc(100% - 10px); // 10px is height of your first div...
todos los navegadores principales en estos días lo admiten, así que adelante, si no tiene el requisito de ser compatible con los navegadores antiguos.
Es dinámico calcular el espacio de pantalla reminente, mejor usando Javascript.
Puedes usar la tecnología CSS-IN-JS, como debajo de lib:
Escindiendo la idea del Sr. Alien ...
Esto parece una solución más limpia que la popular flex box one para los navegadores habilitados para CSS3.
Simplemente use min-height (en lugar de height) con calc () para el bloque de contenido.
El calc () comienza con el 100% y resta las alturas de los encabezados y pies de página (es necesario incluir valores de relleno)
Usar "min-height" en lugar de "height" es particularmente útil por lo que puede funcionar con contenido renderizado de javascript y marcos JS como Angular2. De lo contrario, el cálculo no empujará el pie de página a la parte inferior de la página una vez que el contenido renderizado de javascript esté visible.
Este es un ejemplo simple de un encabezado y pie de página que utiliza 50px de altura y 20px para ambos.
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
Css:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Por supuesto, las matemáticas se pueden simplificar, pero se entiende la idea ...
que nunca trabajó para mí en otra forma, entonces con el uso del JavaScript como NICCAI sugerido en la primera respuesta. Estoy utilizando ese enfoque para volver a escalar el <div>con Google Maps.
Aquí está el ejemplo completo de cómo hacerlo (funciona en Safari / FireFox / IE / iPhone / Andorid (funciona con rotación)):
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName(''body'')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
style="height:100vh"
resuelto el problema para mi En mi caso apliqué esto al div requerido.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
En todos los navegadores sanos, puede colocar el div "header" antes del contenido, como hermano, y el mismo CSS funcionará. Sin embargo, IE7 no interpreta la altura correctamente si el flotador es del 100% en ese caso, por lo que el encabezado debe estar EN el contenido, como se indicó anteriormente. El desbordamiento: automático causará barras de desplazamiento dobles en IE (que siempre tiene la barra de desplazamiento de la ventana gráfica visible pero deshabilitada), pero sin ella, el contenido se recortará si se desborda.