html - Faire un div remplir la hauteur de l'espace d'écran restant

meilleur 5 Réponses html - Faire un div remplir la hauteur de l'espace d'écran restant

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>

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

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

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

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

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 }

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>

html - Faire un div remplir la hauteur de l'espace d'écran restant

meilleur 5 Réponses html - Faire un div remplir la hauteur de l'espace d'écran restant

Questions similaires