Как сделать такой макет? Динамическая высота элементов с прокруткой

Приложение основано на вкладках и не может превышать 100 vh. Проблема в том, что вкладок много, некоторые из них неглубокие, некоторые сложно вложенные.

Если элемент превышает доступную высоту, он должен отображать полосу прокрутки. Таким образом, высота элемента не может быть зафиксирована.

Я думаю, что все элементы должны разделять какое-то пространство и быть гибкими, но я не знаю правильного подхода.

Несколько превью того, что у меня на уме:

Как сделать такой макет? Динамическая высота элементов с прокруткой

Могут быть 1, 2, 3 ... 10 и т. д. Вложенных вкладок с разным содержимым.

Другая ситуация: есть внутренняя боковая панель, высота также не может превышать 100 vh и ее можно прокручивать, если места недостаточно.

Как сделать такой макет? Динамическая высота элементов с прокруткой

Я считаю, что вам следует взглянуть на библиотеки, такие как Bootstrap, они предоставляют полный набор тегов, которые могут значительно помочь вам в создании дизайна вашего веб-сайта, одной из основных функций Bootstrap является система col, которая позволяет создавать столбцы для упорядочивания ваш макет (и глядя на него, вы, вероятно, захотите взять добычу в bootstrap и cols)

— 13.07.2018 10:21

@xoxel, я не хочу использовать бутстрап в этом проекте, какое-либо другое решение?

— 13.07.2018 10:23

Я сам никогда не сталкивался с этим случаем, поэтому на данный момент я не вижу никакого решения, включающего только "ванильный" html / css: / Я вернусь к вам, если он у меня есть

— 13.07.2018 10:26

@Aracius использует flexbox

— 13.07.2018 10:42

html css layout

13.07.2018 10:17

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 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 .right50vh * 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>

Измените значения в соответствии с вашими потребностями.

спасибо за этот подробный ответ, но я вижу, что высота в вашем коде жестко запрограммирована, и мне нужно, чтобы моя высота была выровнена в соответствии с содержимым

— 17.07.2018 09:52

14.07.2018 01:38