Question

应用程序基于标签，并且不能超过100 vh。问题在于选项卡很多，其中有些是浅标签，有些是复杂的嵌套。

如果元素超过可用高度，则应显示滚动条。因此元素的高度不能固定。

我认为所有元素都应该共享一定的空间并保持灵活性，但是我不知道正确的方法。

我脑海中的一些预览：

可能会有1、2、3 ... 10等具有不同内容的嵌套选项卡。

另一种情况：内部侧边栏的高度也不能超过100 vh，如果没有足够的空间，则可以滚动。

Answer 1

给左侧和右侧一个宽度。设置左侧float: left和右侧float: right。它们的总宽度应为100%。

结构布局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>

设置应具有滚动条的元素的高度。顶部和底部的高度为50vh - (nav height / 2)。底部有两个导航栏。因此，底部的内容节的高度为50vh - 2.5 * nav height。

总计

* {
  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>

结构布局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>

设置.bottom-wrapper .left和.bottom-wrapper .right 50vh * 1.5 nav height的高度。

总计

* {
  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>

根据需要更改值。

如何进行这样的布局？带滚动元素的动态高度

1 个答案:

总计

总计