css - tamaño - div que ocupe toda la pantalla bootstrap




Haz un div lleno de la altura del espacio de pantalla restante (20)

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.


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


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

Demo

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.


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


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


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

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

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


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>

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>

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.



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.





html-table