css tamaño ancho - Haz un div lleno de la altura del espacio de pantalla restante



15 Answers

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.

ajustar que ocupe

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.




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%;  
}

FIDDLE1 y FIDDLE2

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 CSS

table    { 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 } 



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>




¿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:




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!




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%;



<!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.




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.




¿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




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>



Solución CSS Grid

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>

Una guía completa para Grids @ CSS-Tricks.com




Prueba esto

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);



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/




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>





Related