How to maintain a responsive daughter DIV without overriding parent DIV and without using overflow:Hidden

Asked

Viewed 59 times

3

Guys, I’ve been trying to apply an HTML layout for a while but I’m having trouble keeping Divs responsive. Basically the layout I want is this one.

inserir a descrição da imagem aqui

However when adding more color Divs Tomato the layout is overlapped and I end up getting this result.

inserir a descrição da imagem aqui

I would like to solve this problem but I could not find any solution.

Follow my HTML and CSS codes to analyze.

*,
*::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>

html css

  • Dude the problem is that you went out putting 100% height on everything... Some elements, even interns are picking up 100% of Body’s height and not Dad’s... In fact the son takes 100% of the height of the father, which is 100% of the height of Body, then the son does not fit in the father, since there are other children with fixed height in px.

  • So more in case I want all the content to be inside the page without the scroll side where only the card-list is scrolled, I could not visualize a form of content occupy the entire screen without using the 100%.

2 answers

4


What’s causing the problem is height: 100% in his tab-container div.

It turns out that the height of tab-container was set at 100% and your div tab-header was set to a minimum height of 48px, so 100% + 48px... so your div "overlap" the rest of the layout at 48px...

One way to solve this problem would be to define % tbm for your tab-header, or calculate the size of the tab-container minus the size of tab-header

Solution 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

The problem is that it is using 100% height in various classes, so the children are the same height as the father, which is the same height as Body. To solve this you can reduce to the height of the classes or you can use the method calc for example:

height: calc(100%-70%);

So you’ll be able to keep the site responsive and if you want to change the height you just have to decrease or increase the percentage!

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>

Everything is responsive, just copy and paste in your code!

  • If you can be more specific with the use of this method will help a lot, I tried to change in some parts of my code in order to test it but could not get the result I want.

  • @Joaovictordepaularamos Done, you can take a look.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.