3

Caros, estou a algum tempo tentando aplicar um layout em HTML porem estou tendo problemas em manter as DIVs responsivas. Basicamente o layout que quero é esse aqui.

inserir a descrição da imagem aqui

Porem ao adicionar mais DIVs da cor tomato o layout fica com sobreposição e acabo chegando a este resultado.

inserir a descrição da imagem aqui

Gostaria de resolver este problema porem não consegui encontrar nenhuma solução.

Segue meus códigos HTML e CSS para analise.

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    min-height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 48px;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 355px;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 48px;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}
<div class="container">
    <div class="panel">
        <div class="tab">
            <div class="tab-header">
            </div>
            <div class="tab-content">
                <div class="card-actions"></div>
                <div class="card-groups">
                    <div class="card-group">
                        <div class="title">
                        </div>
                        <div class="card-list">
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2
  • Cara o problema é que vc saiu colocando height de 100% em tudo... Alguns elementos, mesmo internos estão pegando 100% da altura do Body e não do pai... Na verdade o filho pega 100% da altura do pai, que é 100% da altura do Body, ai o filho não cabe no pai, uma vez que ali tem outros filhos com altura fixa em px.
    – hugocsl
    7/06/2021 às 14:17
  • Então mais no caso que quero que todo o conteúdo fique dentro da pagina sem o scroll lateral onde só os card-list fique com scroll, eu não consegui visualizar uma forma do conteúdo ocupar a tela inteira sem utilizar o 100%. 7/06/2021 às 14:44

2 Respostas 2

4

O que esta causando o problema é height: 100% na sua tab-container div.

Acontece que a altura do tab-container foi definida em 100% e a sua div tab-header foi definida com uma altura minima de 48px, logo 100% + 48px... por isso sua div "sobrepoem" o resto do layout em 48px...

Uma forma de solucionar esse problema seria vc definir % tbm para a sua tab-header, ou calcular o tamanho da tab-container menos o tamanho da tab-header

Solucao 01:

.tab-header {
    height: 10%;
    ...
}

.tab-content {
    height: 90%;
    ...
}

Solucao 02:

.tab-content {
    height: calc(100% - 48px);
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 48px);
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 48px;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 355px;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 48px;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}
<div class="container">
    <div class="panel">
        <div class="tab">
            <div class="tab-header">
            </div>
            <div class="tab-content">
                <div class="card-actions"></div>
                <div class="card-groups">
                    <div class="card-group">
                        <div class="title">
                        </div>
                        <div class="card-list">
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

3

O problema é que está a usar o 100% da height em varias classes, logo os filhos ficam com a altura do pai que por consequência é a mesma altura do Body. Para resolver isso podes reduzir ao height das classes ou então podes usar o método calc por exemplo:

height: calc(100%-70%);

Assim vais conseguir ficar com o site responsivo e se quiseres alterar a altura só tens que diminuir ou aumentar a percentagem!

EDIT

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 98vh;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 4%);
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 6%;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 25%;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 6%;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}
<div class="container">
  <div class="panel">
      <div class="tab">
          <div class="tab-header">
          </div>
          <div class="tab-content">
              <div class="card-actions"></div>
              <div class="card-groups">
                  <div class="card-group">
                      <div class="title">
                      </div>
                      <div class="card-list">
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                          <div class="card"></div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

Está tudo responsivo, é só copiar e colar no seu código!

2
  • Se você conseguir ser mais especifico com a utilização desse método ajudara muito, eu tentei trocar em algumas partes do meu código com o intuito de testa-lo porem não consegui chegar no resultado que eu quero. 7/06/2021 às 14:56
  • @JoaoVictordePaulaRamos Feito, pode dar uma olhadela.
    – Jose Badim
    8/06/2021 às 8:57

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 .