Haga que un div llene la altura del espacio restante de la pantalla

Actualización de 2015: el enfoque de 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 asentado ahora.

Nota: Aunque la especificación CSS Flexible Boxes Layout se encuentra en la etapa de recomendación candidata, no todos los navegadores la han implementado. La implementación de WebKit debe tener el prefijo -webkit-; Internet Explorer implementa una versión antigua 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 conocer el estado de compatibilidad actualizado.

(tomado de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

Todos los principales navegadores e IE11 + son compatibles con Flexbox. Para IE 10 o más, puede usar la cuña FlexieJS.

Para comprobar el soporte 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, ya sea que tengan dimensiones fijas, dimensiones del tamaño del contenido o dimensiones del espacio restante. En mi ejemplo, configuré el encabezado para que se ajustara a su contenido (según la pregunta de OP), agregué un pie de página para mostrar cómo agregar una región de altura fija y luego configuré 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, el flexionar la propiedad abrevia la flex-grow, encogimiento flexible y base flexible propiedades para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una buena introducción al modelo de cajas flexibles.

Realmente no hay una forma sólida y entre navegadores de hacer esto en CSS. Suponiendo que su diseño tiene complejidades, debe usar JavaScript para establecer la altura del elemento. La esencia de lo que debe hacer es:

Element Height = Viewport height - element.offset.top - desired bottom margin

Una vez que pueda obtener este valor y establecer la altura del elemento, debe adjuntar controladores de eventos tanto al onload como al onresize de la ventana para que pueda activar su función de cambio de tamaño.

Además, asumiendo que su contenido podría ser más grande que la ventana gráfica, deberá configurar overflow-y para desplazarse.

La publicación original es de hace más de 3 años. Supongo que muchas personas que vienen a esta publicación como yo están buscando una solución de diseño similar a una aplicación, digamos un encabezado, pie de página y contenido de altura completa que ocupe el resto de la pantalla. 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 esa publicación:

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

En lugar de usar tablas en el marcado, puede usar tablas CSS.

Marcado

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Relevante) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

VIOLÍN1 y VIOLÍN2

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) La compatibilidad con el navegador es muy bien: IE8 +, todos los navegadores y dispositivos móviles modernos (Puedo usar)

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 } 

Enfoque solo CSS (si la altura es conocida / fija)

Cuando desee que el elemento del medio se extienda por toda la página verticalmente, puede utilizar calc() que se introduce en CSS3.

Suponiendo que tenemos un altura fija header y footer elementos y queremos el section etiqueta para tomar toda la altura vertical disponible ...

Demo

Marcado asumido y 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;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Así que aquí, lo que estoy haciendo es sumar la altura de los elementos y luego deducir de 100% usar calc() función.

Solo asegúrate de usar height: 100%; para los elementos principales.

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

Una solución simple, usando flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

<body>
  <div>header</div>
  <div class="content"></div>
</body>

Ejemplo de Codepen

Una solución alternativa, con un div centrado dentro del div de contenido

¿Qué tal si simplemente usa vh Lo que significa view height in CO...

Mira el fragmento de código Creé para ti a continuación y lo ejecuté:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

Además, mire la imagen a continuación que creé para usted:

CSS3 de forma sencilla

height: calc(100% - 10px); // 10px is height of your first div...

Todos los navegadores principales en estos días lo admiten, así que continúe si no tiene el requisito de admitir navegadores antiguos.

Podría ser hecho puramente por CSS usar 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 revisé, funciona en todos los navegadores principales: Chrome, IE y FireFox

Ninguna de las soluciones publicadas funciona cuando necesita que el div inferior se desplace cuando el contenido es demasiado alto. Aquí hay una solución que funciona en ese caso:

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

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

Fuente original: llenado de la altura restante de un contenedor mientras se maneja el desbordamiento en CSS

Vista previa en vivo de JSFiddle

También he estado buscando una respuesta para esto. Si tiene la suerte de poder apuntar a IE8 y superior, puede usar display:table y valores relacionados para obtener las reglas de representación de tablas con elementos a nivel de bloque, incluido div.

Si tiene aún 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 mi último proyecto), puede usar el nuevo Diseño de caja flexible en CSS3!

Lo que funcionó para mí (con un div dentro de otro div y supongo que 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%;

Descargo de responsabilidad: la respuesta aceptada da la idea de la solución, pero la encuentro un poco hinchada con una envoltura innecesaria 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>

CO

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 */
}

Solución anterior utiliza unidades de ventana gráfica y 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 contenido desbordado: enlace a codepen

Hay un montón de respuestas ahora, pero encontré usando height: 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 tablero en el que tenía una barra lateral y una principal. Quería que la línea principal se estirara y llenara todo el espacio vertical para poder aplicar un color de fondo.

div {
    height: 100vh;
}

Soporta IE9 y superior: haga clic para ver el enlace

<!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 cuerdos, puede poner el div "encabezado" antes del contenido, como hermano, y el mismo CSS funcionará. Sin embargo, IE7- no interpreta la altura correctamente si el flotador es 100% en ese caso, por lo que el encabezado debe estar DENTRO del 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 anterior), puede hacerlo con Módulo de diseño de caja flexible que ya es W3C CR. Ese módulo también permite otros buenos trucos, como reordenar el contenido.

Desafortunadamente, MSIE 9 o versiones inferiores no son compatibles con esto y debe usar el prefijo de proveedor para la propiedad CSS para todos los navegadores que no sean Firefox. Es de esperar que otros proveedores también eliminen el prefijo pronto.

Otra opción sería Diseño de cuadrícula CSS pero eso tiene incluso menos soporte de versiones estables de navegadores. En la práctica, solo MSIE 10 lo admite.

Actualización año 2020: Todos los navegadores modernos admiten ambos display: flex y display: grid. El único que falta es el soporte para subgrid que solo es compatible con Firefox. Tenga en cuenta que MSIE no es compatible con la especificación, pero si está dispuesto a agregar hacks CSS específicos de MSIE, se puede hacer que se comporte. Sugeriría simplemente ignorar MSIE porque incluso Microsoft dice que ya no debería usarse.

Solución de cuadrícula CSS

Simplemente definiendo el body con display:grid y el grid-template-rows usar auto y el fr propiedad de valor.

* {
  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 de Grids @ CSS-Tricks.com

Luché con esto por un tiempo y terminé con lo siguiente:

Dado que es fácil hacer que el contenido DIV tenga la misma altura que el padre, pero aparentemente es difícil convertirlo en la altura del padre menos la altura del encabezado, decidí hacer que el contenido sea div a la altura completa, pero colóquelo absolutamente en la esquina superior izquierda y luego defina un relleno. para la parte superior que tiene la altura de la cabecera. De esta manera, el contenido se muestra ordenadamente 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%;
}

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

¿Darle html y body (en ese orden) una altura y luego simplemente dar una altura a sus elementos?

Funciona para mi

 style="height:100vh"

resolvió el problema por mí. En mi caso, apliqué esto al div requerido

Realmente puedes 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 position establecido en relative, absolute or fixed. Funcionará siempre que el elemento padre tenga una altura distinta de cero.

Mira este violín y también el siguiente código:

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>

Vincent, te responderé de nuevo usando tus nuevos requisitos. Como no le importa que el contenido se oculte si es demasiado largo, no es necesario que flote el encabezado. Simplemente coloque overflow oculto en las etiquetas html y body, y configure #content altura al 100%. El contenido siempre será más largo que la ventana gráfica por la altura del encabezado, pero estará oculto y no generará 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>

En Bootstrap:

Estilos CSS:

html, body {
    height: 100%;
}

1) Simplemente llene la altura del espacio restante de la pantalla:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2) llene la altura del espacio restante de la pantalla y alinee el contenido con la mitad del elemento principal:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

Prueba esta

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

Para la aplicación móvil, uso solo 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;
}

Demo https://jsfiddle.net/u763ck92/

Esta es mi propia versión mínima de la solución de Pebbl. Tomó una eternidad encontrar el truco para que funcione en IE11. (También probado en Chrome, Firefox, Edge y Safari).

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div:first-child {
  background: gold;
}

div:last-child {
  background: plum;
  flex-grow: 1;
}

<body>
  <section>
    <div>FIT</div>
    <div>GROW</div>
  </section>
</body>

Encontré una solución bastante simple, porque para mí era solo una cuestión de diseño. Quería que el resto de la página no fuera blanco debajo del pie de página rojo. Así que configuré el color de fondo de las páginas en rojo. Y el contenido backgroundcolor a blanco. Con la altura del contenido establecida en, por ejemplo. 20em o 50% una página casi vacía no dejará toda la página roja.

Tuve el mismo problema, pero no pude hacer funcionar la solución con los flexboxes anteriores. 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

Usé flexboxes pero de una manera más simple, usando solo propiedades pantalla: flex y dirección flexible: fila | columna:

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 con el fin de 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>

Derivado de la idea del Sr. Alien ...

Esta parece una solución más limpia que la popular caja flexible para navegadores habilitados para CSS3.

Simplemente use min-height (en lugar de height) con calc () en el bloque de contenido.

Calc () comienza con 100% y resta alturas de encabezados y pies de página (es necesario incluir valores de relleno)

Usar "min-height" en lugar de "height" es particularmente útil para que pueda funcionar con contenido renderizado en javascript y marcos JS como Angular2. De lo contrario, el cálculo no empujará el pie de página al final de la página una vez que el contenido renderizado de JavaScript sea visible.

A continuación, se muestra un ejemplo sencillo de un encabezado y un pie de página con 50 píxeles de altura y 20 píxeles de relleno 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 entiendes la idea ...