3

Como devo proceder para que minha <div id="rosa"> ocupe toda a área disponível mesmo quando a janela for redimensionada e não uma altura especifica?

html,
body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    background: yellow;
    position: fixed;
    top: 0;
    height: 100px;
    z-index: 100;
}

#corpo {
    position: relative;
    min-height: 100%;
    /* Sizing - any length */
    padding: 100px 0 30px 0;
    /* Header height and footer height */
    margin: 0 auto 0 auto;
    /* Center corpo */
}

#menu {
    background: red;
    width: 200px;
    top: 100px;
    bottom: 20px;
    left: 0;
    position: fixed;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#conteudo {
    background: green;
    margin-left: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#campos {
    height: 80px; 
    background-color: blue;
}

#rosa {
    background-color: pink;
    height: 400px;
}

footer {
    background: yellow;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>teste</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!-- Always on top: Position Fixed-->
    <header>
        header
    </header>
    <!-- Fixed size after header-->
    <div id="corpo">
        <!-- Always on top. Fixed position, fixed width, relative to corpo width-->
        <div id="menu">
            menu-left
        </div>
        <!-- conteudo div with main corpo -->
        <div id="conteudo">
            <div id="campos"></div>
            <div id="rosa">
                a
            </div>
        </div>
    </div>
    <!-- Always at the end of the page -->
    <footer>
        footer
    </footer>
</body>

</html>

4
  • Depende. Você quer que a página inteira seja estática? Seu conteúdo vai todo na div rosa? Deve haver um scroll? Commented 5/07/2017 às 13:44
  • Meu conteúdo vai na div rosa com scroll se necessário. Obrigado pela disposição. Commented 5/07/2017 às 13:50
  • Você deseja alguma responsividade? Commented 5/07/2017 às 14:00
  • A principio não. Commented 5/07/2017 às 14:00

3 Respostas 3

2

Fiz uma reestruturação total para melhor atender o que você descreveu, mas no caso de uma boa responsividade, seria ideal abordar de outras formas. Segue um exemplo me apropriando principalmente de unidades vh e vw para que siga sempre a mesma estrutura independente do tamanho da tela:

EDIT 2 - AZUL DENTRO DO ROSA:

html,
body {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: yellow;
  position: fixed;
  top: 0;
  height: 100px;
  z-index: 100;
}

#corpo {
  position: relative;
  min-height: 100%;
  margin: 100px auto 0 auto;
  width: 100%;
  height: calc(100vh - 120px);
}

#menu {
  background: red;
  width: 200px;
  top: 0;
  left: 0;
  height: calc(100vh - 120px);
  position: absolute;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#conteudo {
  background: green;
  margin-left: 200px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

#campos {
  width: 100%;
  height: 80px;
  background-color: blue;
}

#rosa {
  background-color: pink;
  position: absolute;
  width: 100%;
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

footer {
  background: yellow;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>teste</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <!-- Always on top: Position Fixed-->
  <header>
    header
  </header>
  <!-- Fixed size after header-->
  <div id="corpo">
    <!-- Always on top. Fixed position, fixed width, relative to corpo width-->
    <div id="menu">
      menu-left
    </div>
    <!-- conteudo div with main corpo -->
    <div id="conteudo">
      <div id="rosa">
        <div id="campos"></div>
        TESTE<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
    </div>
  </div>
  <!-- Always at the end of the page -->
  <footer>
    footer
  </footer>
</body>

</html>

9
  • Obrigado pela resposta mas gostaria que as alturas e larguras dos outros elementos permanecessem fixas e não proporcionais. Commented 5/07/2017 às 14:38
  • @AlaercioMazutti Cheque minha edição Commented 5/07/2017 às 14:46
  • Ao colocar conteúdo na <div id="rosa"> (vários rosa1<br /> por exemplo) aparece scroll que esta rolando tudo. Tentei colocar overflow-y: scroll; na <div id="rosa"> até funcionou mas eu gostaria que o scroll abrangesse também a <div id="campos">. Commented 5/07/2017 às 15:04
  • Como assim? A barra azul tem que se mover junto? Ou você quer a barra de rolagem em cima da faixa azul, mas sem afetar ela? Commented 5/07/2017 às 15:09
  • 1
    Feito. Tô aprendendo isso aqui também. Valeu. Commented 5/07/2017 às 16:45
2

no seu arquivoo CSS deixe o #rosa assim

    #rosa {
        background-color: pink;
        height: 100%;
        width: 100%
    }
2

Para que preencha a tela toda, você precisa definir position:absolute, height: 100% e width: 100%. Caso a posição da div não seja absoluta, não funcionará apenas com altura e largura tendo percentual total. Veja funcionando:

html,
body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    background: yellow;
    position: fixed;
    top: 0;
    height: 100px;
    z-index: 100;
}

#corpo {
    position: relative;
    min-height: 100%;
    /* Sizing - any length */
    padding: 100px 0 30px 0;
    /* Header height and footer height */
    margin: 0 auto 0 auto;
    /* Center corpo */
}

#menu {
    background: red;
    width: 200px;
    top: 100px;
    bottom: 20px;
    left: 0;
    position: fixed;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#conteudo {
    background: green;
    margin-left: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#campos {
    height: 80px; 
    background-color: blue;
}

#rosa {
    background-color: pink;
    height: 100%;
    width: 100%;
    position:absolute
}

footer {
    background: yellow;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>teste</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!-- Always on top: Position Fixed-->
    <header>
        header
    </header>
    <!-- Fixed size after header-->
    <div id="corpo">
        <!-- Always on top. Fixed position, fixed width, relative to corpo width-->
        <div id="menu">
            menu-left
        </div>
        <!-- conteudo div with main corpo -->
        <div id="conteudo">
            <div id="campos"></div>
            <div id="rosa">
                a
            </div>
        </div>
    </div>
    <!-- Always at the end of the page -->
    <footer>
        footer
    </footer>
</body>

</html>

2
  • Ficou meio estranho. Gostaria que a <div id="menu"> ficasse fixa (está sobrepondo). Tentei colocar width: calc(100% - 200px); (não sei se é por ai... não tenho muita intimidade com css) e funcionou para a largura mas para a altura não. Commented 5/07/2017 às 14:23
  • @AlaercioMazutti mas aí já outro problema. A princípio vc disse para a <div id="rosa"> ocupar a área total. Essa resposta não responde isso?
    – viana
    Commented 5/07/2017 às 14:27

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 .