css Faça um div preencher a altura do espaço restante na tela





15 Answers

Realmente não existe uma maneira sólida e interativa de fazer isso no CSS. Supondo que seu layout tenha complexidades, você precisa usar JavaScript para definir a altura do elemento. A essência do que você precisa fazer é:

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

Uma vez que você pode obter este valor e definir a altura do elemento, você precisa anexar manipuladores de eventos para onload e onresize da janela para que você possa disparar sua função de redimensionamento.

Além disso, supondo que seu conteúdo possa ser maior que a janela de visualização, você precisará configurar o estouro-y para rolar.

css html html-table

No momento, estou trabalhando em um aplicativo da web, no qual quero que o conteúdo preencha a altura de toda a tela.

A página tem um cabeçalho, que contém um logotipo e informações da conta. Isso pode ser uma altura arbitrária. Eu quero que o conteúdo div atinja o restante da página até o final.

Eu tenho um div cabeçalho e um div conteúdo. No momento estou usando uma tabela para o layout da seguinte forma:

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

A altura inteira da página é preenchida e não é necessária nenhuma rolagem.

Para qualquer coisa dentro do conteúdo div, configuração top: 0; vai colocá-lo logo abaixo do cabeçalho. Às vezes, o conteúdo será uma tabela real, com a altura definida como 100%. Colocar o header dentro do content não permitirá que isso funcione.

Existe uma maneira de obter o mesmo efeito sem usar a table ?

Atualizar:

Elementos dentro do conteúdo div também terão alturas configuradas para porcentagens. Então, algo em 100% dentro do div irá preenchê-lo para o fundo. Assim como dois elementos em 50%.

Atualização 2:

Por exemplo, se o cabeçalho ocupar 20% da altura da tela, uma tabela especificada em 50% dentro do #content ocuparia 40% do espaço da tela. Até agora, embrulhar a coisa toda em uma mesa é a única coisa que funciona.




Em vez de usar tabelas na marcação, você poderia usar tabelas CSS.

Marcação

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

CSS (relevante)

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

FIDDLE1 e FIDDLE2

Algumas vantagens deste método são:

1) Menos marcação

2) A marcação é mais semântica que as tabelas, porque não são dados tabulares.

3) Suporte do navegador é muito bom : IE8 +, todos os navegadores modernos e dispositivos móveis ( caniuse )

Apenas para completar, aqui estão os elementos HTML equivalentes às propriedades css para o modelo de tabela 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 } 



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>




Que tal você simplesmente usar vh que significa view height em CSS ...

Veja o snippet de código que criei para você abaixo e execute-o:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Além disso, veja a imagem abaixo que criei para você:




Eu tenho procurado por uma resposta para isso também. Se você tiver a sorte de poder direcionar o IE8 para cima, poderá usar display:table e valores relacionados para obter as regras de renderização de tabelas com elementos de nível de bloco, incluindo div.

Se você tiver mais sorte e seus usuários estiverem usando navegadores de primeira linha (por exemplo, se for um aplicativo de intranet em computadores que você controla, como meu projeto mais recente é), você pode usar o novo Layout de caixa flexível em CSS3!




O que funcionou para mim (com um div dentro de outro div e suponho em todas as outras circunstâncias) é definir o preenchimento inferior como 100%. Isto é, adicione isso ao seu CSS / folha 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>

Em todos os navegadores saudáveis, você pode colocar o "cabeçalho" div antes do conteúdo, como um irmão, e o mesmo CSS funcionará. No entanto, o IE7- não interpreta a altura corretamente se o float for 100% nesse caso, portanto, o cabeçalho precisa estar no conteúdo, como acima. O estouro: auto causará barras de rolagem dupla no IE (que sempre tem a barra de rolagem da janela de visualização visível, mas desativada), mas sem ela, o conteúdo será cortado se estourar.




Se você pode lidar com o fato de não suportar navegadores antigos (isto é, o MSIE 9 ou mais antigo), você pode fazer isso com o http://caniuse.com/#feat=flexbox que já é o W3C CR. Esse módulo também permite outros truques interessantes, como reordenar o conteúdo.

Infelizmente, o MSIE 9 ou inferior não suporta isso e você precisa usar o prefixo do fornecedor para a propriedade CSS para cada navegador diferente do Firefox. Espero que outros fornecedores também descartem o prefixo em breve.

Outra opção seria o CSS Grid Layout, mas com menos suporte de versões estáveis ​​de navegadores. Na prática, apenas o MSIE 10 suporta isso.




Por que não apenas assim?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Dando-lhe html e corpo (nessa ordem) uma altura e, em seguida, apenas dar seus elementos uma altura?

Funciona para mim




Você pode realmente usar display: table para dividir a área em dois elementos (cabeçalho e conteúdo), onde o cabeçalho pode variar em altura e o conteúdo preenche o espaço restante. Isso funciona com toda a página, bem como quando a área é simplesmente o conteúdo de outro elemento posicionado com position definida como relative , absolute ou fixed . Ele funcionará desde que o elemento pai tenha uma altura diferente de zero.

Veja este violino e também o código abaixo:

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>



Solução de Grade CSS

Apenas definindo o bodycom display:gride o grid-template-rowsuso autoe a frpropriedade value.

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

Um Guia Completo para Grids @ CSS-Tricks.com




Tente isso

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



Para aplicativos móveis eu uso apenas VH e 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/




Decidindo a ideia do Sr. Alien ...

Esta parece ser uma solução mais limpa do que a popular flex box para navegadores habilitados para CSS3.

Simplesmente use min-height (em vez de height) com calc () para o bloco de conteúdo.

O calc () começa com 100% e subtrai as alturas de cabeçalhos e rodapés (precisa incluir valores de preenchimento)

Usar "min-height" em vez de "height" é particularmente útil para que ele possa trabalhar com conteúdo renderizado em javascript e estruturas JS como Angular2. Caso contrário, o cálculo não enviará o rodapé para a parte inferior da página quando o conteúdo renderizado por javascript estiver visível.

Aqui está um exemplo simples de cabeçalho e rodapé usando a altura de 50px e o preenchimento de 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));
}

Claro, a matemática pode ser simplificada, mas você tem a idéia ...




que nunca trabalhou para mim de outra forma, em seguida, com o uso do JavaScript como NICCAI sugerido na primeira resposta. Estou usando essa abordagem para reescalonar <div>o Google Maps.

Aqui está o exemplo completo de como fazer isso (funciona no Safari / FireFox / IE / iPhone / Andorid (funciona com rotação)):

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