2

Procuro uma forma de dispor de um layout que atenda ao comportamento abaixo:

Layout Proposto

A grande questão aqui é fazer com que a div central se delimite às extremidades das demais div's, de forma que estas não se sobreponham àquela.

Fazendo uma alusão ao mundo Desktop, gostaria de adicionar uma classe CSS à minha <div> que simule o comportamento DockStyle.Fill.

Há como fazer isso apenas com CSS?

1
  • Coloque um max-height na div central, pra que ocupe no máximo o espaço entre as duas divs.
    – Tiago P.C
    Commented 20/01/2016 às 17:58

3 Respostas 3

2

Você pode usar flexbox

body, html {
  position: relative;
  display: flex; /* repare aqui */
  flex-direction: column; /* repare aqui */
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

header, footer {
  width: 100%;
  height: 40px;
  background-color: white;
  box-shadow: 0px 0px 10px black;
  z-index: 2;
}

section {
  flex: 1; /* repare aqui - vai ocupar todo o espaço livre no elemento pai, neste caso o body */
  overflow-y: auto;
  background-color: whitesmoke;
  z-index: 1;
}

#placebo {
  height: 5000px;
}
<header></header>
<section>
  <div id="placebo"></div>
</section>
<footer></footer>

1
  • Obrigado! Procurava algo mais nesta linha, sem que a tag de conteúdo tivesse que se preocupar com o tamanho das demais extremidades. Commented 20/01/2016 às 18:47
1

Não sei como funciona o comportamento do DockStyle.Fill, mas você poderia fazer algo desse tipo:

HTML:

<div id='header'></div>
<div id='content'></div>
<div id='footer'></div>

CSS:

*{
  margin: 0;
  padding: 0;
 }
#header{
 position: fixed;
 top: 0;
 width: 100%;
 height: 100px;
 background-color: red;
}
#content{
 position: fixed;
 top: 100px;
 bottom: 100px;
 width: 100%;
 background-color: gray;
}
#footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: blue;
}

Veja aqui no JSFiddle

1

Semelhante a ideia já postada há esse modo:

body{
  margin: 0;
  padding: 0;
  height: 100%;
  padding: 50px 0;
}
header, footer{
  height: 50px;
  width: 100%;
  background: #333;
  position: fixed;
}
header{  top: 0;}
footer{  bottom: 0;}

#content{
  background: gold;
  position: absolute;
  width: 100%;
  bottom: 50px;
  top: 50px;
}
<header></header>
<div id="content"></div>
<footer></footer>

Você atribui ao header e ao footer um height desejado, essa alturas serão usadas mais a frente para se especificar os espaçamento da div#content para que ela ocupe o espaço restante.

Feito isto, basta atribuir a ambos um position: fixed, e bottom e top.

Com a div#content tendo um position: absolute você não necessita especificar o height e sim o top e bottom, sendo estes a altura do header e do footer, respectivamente. Assim o height desta div será automático. Caso queira um conteúdo com barra de rolagem, basta dar um overflow: auto.

Demo - JsFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .