CODEWITHSUNDEEP
htmlcsslayout
Chris K
Chris K

Reputation: 928

How to make such a layout? Dynamic height of elements with scrolls

Application is based on tabs and it can't exceeds 100 vh. The problem is there are lots of tabs, some of them are shallow, some are complicated nested.

If element exceeds the available height it should display scroll bar. So the height of element cant be fixed.

I think all the elements should share some space and be flexible, but I don't know the correct approach.

Some previews of what I have on my mind:

Preview 1

There might be 1, 2, 3...10 and so on nested tabs with different contents.

Another situation: there is inner sidebar the height also cant exceeds 100 vh and be scrollable if there is not enough space.

Preview 2

Upvotes: 0

Views: 69

Answers (1)

user3589620
user3589620

Reputation:

Give the left side and the right side a width. Set the left side float: left and the right side float: right. In total they should have a width 100%.

Structure layout 1

<div class="container">
  <nav>...</nav>
  <div class="wrapper">
    <aside>...</aside>
    <main>
      <div class="top">
        <nav>...</nav>
        <div class="content">...</div>
      </div>
      <div class="bottom">
        <nav>...</nav>
        <nav>...</nav>
        <div class="content">...</div>
      </div>
    </main>
  </div>
</div>

Set a height for the elements which should have a scroll. The top section and the bottom section has a height 50vh - (nav height / 2). The bottom section has two navs. Therefore the content section at the bottom has a height 50vh - 2.5 * nav height.

In total

* {
  box-sizing: border-box;
}

:root {
  --tabs-height: 50px;
}

body {
  margin: 0;
}

a {
  color: black;
}

main,
aside,
nav {
  border: 1px solid;
}

.flex {
  display: flex;
}

.flex.center {
  justify-content: center;
}

.flex.equal>* {
  flex: 1;
}

.tabs {
  height: var(--tabs-height);
  padding: 0 15px;
}

.tabs a {
  text-decoration: none;
  padding: 0 5px;
  line-height: var(--tabs-height);
}

.container {
  height: 100vh;
  overflow: hidden;
}

.content {
  padding: 15px;
}

aside ul {
  list-style: none;
  padding: 0 15px;
  margin-top: 0;
}

main {
  float: right;
  width: 80%;
}

main .top,
main .bottom {
  height: calc(50vh - var(--tabs-height) / 2);
}

main .content {
  height: calc(50vh - 2.5 * var(--tabs-height));
  overflow-y: scroll;
}

aside {
  float: left;
  width: 20%;
  height: 100vh;
  overflow-y: scroll;
}


/* If height is less than 320px, .top should also scroll */

@media screen and (max-height: 320px) {
  .top {
    overflow-y: scroll;
  }
}
<div class="container">
  <nav class="tabs flex center">
    <a href="">Link 1</a>
    <a href="">Link 2</a>
    <a href="">Link 3</a>
    <a href="">Link 4</a>
    <a href="">Link 5</a>
  </nav>
  <div class="wrapper">
    <aside>
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
        <li>List 7</li>
        <li>List 8</li>
        <li>List 9</li>
        <li>List 10</li>
        <li>List 11</li>
        <li>List 12</li>
        <li>List 13</li>
        <li>List 14</li>
        <li>List 15</li>
        <li>List 16</li>
        <li>List 17</li>
        <li>List 18</li>
        <li>List 19</li>
        <li>List 20</li>
        <li>List 21</li>
        <li>List 22</li>
        <li>List 23</li>
        <li>List 24</li>
        <li>List 25</li>
        <li>List 26</li>
        <li>List 27</li>
        <li>List 28</li>
        <li>List 29</li>
        <li>List 30</li>
        <li>List 31</li>
        <li>List 32</li>
        <li>List 33</li>
        <li>List 34</li>
        <li>List 35</li>
        <li>List 36</li>
        <li>List 37</li>
        <li>List 38</li>
        <li>List 39</li>
        <li>List 40</li>
      </ul>
    </aside>
    <main>
      <div class="top">
        <nav class="tabs flex equal">
          <a href="">Link 1</a>
          <a href="">Link 2</a>
          <a href="">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link 5</a>
        </nav>
        <div class="content">
          <h1>Content</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo debitis mollitia ducimus nisi sunt, similique alias recusandae dolor. Explicabo eaque neque laborum enim odit nostrum qui dolores tenetur cumque!</p>
        </div>
      </div>
      <div class="bottom">
        <nav class="tabs flex equal">
          <a href="">Link 1</a>
          <a href="">Link 2</a>
          <a href="">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link 5</a>
        </nav>
        <nav class="tabs flex equal">
          <a href="">Link 1</a>
          <a href="">Link 2</a>
          <a href="">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link 5</a>
        </nav>
        <div class="content">
          <h1>Content</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo debitis mollitia ducimus nisi sunt, similique alias recusandae dolor. Explicabo eaque neque laborum enim odit nostrum qui dolores tenetur cumque!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quibusdam quaerat quia, repellendus iure eum at modi voluptatum perferendis tenetur fugit magni molestias, quam voluptatibus dolorum nam veritatis. Non, ipsum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat optio ex ipsum animi consequuntur autem repellat assumenda et accusamus cumque sunt, omnis dolorem non, consectetur sint temporibus fuga ipsa, nesciunt?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero animi nisi earum vero! Dignissimos maiores obcaecati amet ratione at, ipsam minima unde ex quo consequuntur commodi adipisci minus possimus, facere.</p>
        </div>
      </div>
    </main>
  </div>
</div>

Structure layout 2

<div class="container">
  <nav>...</nav>
  <div class="wrapper">
    <aside>...</aside>
    <main>
      <div class="top">
        <nav>...</nav>
        <div class="content">...</div>
      </div>
      <div class="bottom">
        <nav>...</nav>
        <div class="bottom-wrapper">
          <aside class="left">...</aside>
          <div class="right">
            <div class="content">...</div>
          </div>
      </div>
    </main>
  </div>
</div>

Set height for .bottom-wrapper .left and .bottom-wrapper .right 50vh * 1.5 nav height.

In total

* {
  box-sizing: border-box;
}

:root {
  --tabs-height: 50px;
}

body {
  margin: 0;
}

a {
  color: black;
}

main,
aside,
nav {
  border: 1px solid;
}

.flex {
  display: flex;
}

.flex.center {
  justify-content: center;
}

.flex.equal>* {
  flex: 1;
}

.tabs {
  height: var(--tabs-height);
  padding: 0 15px;
}

.tabs a {
  text-decoration: none;
  padding: 0 5px;
  line-height: var(--tabs-height);
}

.container {
  height: 100vh;
  overflow: hidden;
}

.content {
  padding: 15px;
}

aside ul {
  list-style: none;
  padding: 0 10px;
  margin-top: 0;
}

nav.main {
  text-align: center;
}

main .top,
main .bottom {
  height: calc(50vh - var(--tabs-height) / 2);
}

.right {
  float: right;
  width: 80%;
}

.left {
  float: left;
  width: 20%;
}

.wrapper>aside {
  height: 100vh;
  overflow-y: scroll;
}

.bottom-wrapper .left,
.bottom-wrapper .right {
  height: calc(50vh - 1.5 * var(--tabs-height));
  overflow-y: scroll;
}


/* If height is less than 320px, .top should also scroll */

@media screen and (max-height: 320px) {
  .top {
    overflow-y: scroll;
  }
}
<div class="container">
  <nav class="flex center tabs">
    <a href="">Link 1</a>
    <a href="">Link 2</a>
    <a href="">Link 3</a>
    <a href="">Link 4</a>
    <a href="">Link 5</a>
  </nav>
  <div class="wrapper">
    <aside class="left">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
        <li>List 7</li>
        <li>List 8</li>
        <li>List 9</li>
        <li>List 10</li>
        <li>List 11</li>
        <li>List 12</li>
        <li>List 13</li>
        <li>List 14</li>
        <li>List 15</li>
        <li>List 16</li>
        <li>List 17</li>
        <li>List 18</li>
        <li>List 19</li>
        <li>List 20</li>
        <li>List 21</li>
        <li>List 22</li>
        <li>List 23</li>
        <li>List 24</li>
        <li>List 25</li>
        <li>List 26</li>
        <li>List 27</li>
        <li>List 28</li>
        <li>List 29</li>
        <li>List 30</li>
        <li>List 31</li>
        <li>List 32</li>
        <li>List 33</li>
        <li>List 34</li>
        <li>List 35</li>
        <li>List 36</li>
        <li>List 37</li>
        <li>List 38</li>
        <li>List 39</li>
        <li>List 40</li>
      </ul>
    </aside>
    <main class="right">
      <div class="top">
        <nav class="tabs flex equal">
          <a href="">Link 1</a>
          <a href="">Link 2</a>
          <a href="">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link 5</a>
        </nav>
        <div class="content">
          <h1>Content</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo debitis mollitia ducimus nisi sunt, similique alias recusandae dolor. Explicabo eaque neque laborum enim odit nostrum qui dolores tenetur cumque!</p>
        </div>
      </div>
      <div class="bottom">
        <nav class="tabs flex equal">
          <a href="">Link 1</a>
          <a href="">Link 2</a>
          <a href="">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link 5</a>
        </nav>
        <div class="bottom-wrapper">
          <aside class="left">
            <ul>
              <li>List 1</li>
              <li>List 2</li>
              <li>List 3</li>
              <li>List 4</li>
              <li>List 5</li>
              <li>List 6</li>
              <li>List 7</li>
              <li>List 8</li>
              <li>List 9</li>
              <li>List 10</li>
              <li>List 11</li>
              <li>List 12</li>
              <li>List 13</li>
              <li>List 14</li>
              <li>List 15</li>
              <li>List 16</li>
              <li>List 17</li>
              <li>List 18</li>
              <li>List 19</li>
              <li>List 20</li>
            </ul>
          </aside>
          <div class="right">
            <div class="content">
              <h1>Content</h1>
              <p>Test</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo debitis mollitia ducimus nisi sunt, similique alias recusandae dolor. Explicabo eaque neque laborum enim odit nostrum qui dolores tenetur cumque!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quibusdam quaerat quia, repellendus iure eum at modi voluptatum perferendis tenetur fugit magni molestias, quam voluptatibus dolorum nam veritatis. Non, ipsum.</p>
              <h3>Heading h3</h3>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

Change values according to your needs.

Upvotes: 1

Related Questions