Flexbox добавляет X и Y полосы прокрутки для детей, но не тела - PullRequest
Новая
       56

Flexbox добавляет X и Y полосы прокрутки для детей, но не тела

1 голос
/ 01 мая 2020

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

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

Мне сложно понять, как подогнать корпус по ширине и высоте экрана, в то время как содержимое #menu_bar и #main_content имеет правильные полосы прокрутки.

Вот макет того, чего я пытаюсь достичь:

enter image description here

Вот то, что у меня сейчас есть. 

body {
  min-width: 800px;
  min-height: 500px;
  overflow: auto;
  margin: 10px;
  border: solid black 1px;
  max-width: 100%;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
}

#content {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

#menu_bar {
  position: relative;
  border-top: none;
  overflow-y: auto;
}

#tabs {
  width: 100%;
}

.tab {
  margin: 5px;
  padding: 5px;
  width: max-content;
  max-width: 300px;
}

#main {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#main_header {
  display: flex;
  flex-direction: column;
}

#main_content {
  box-sizing: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  margin: 10px;
  max-height: 100%;
}

.vertical-divider {
  border-left: black solid 1px;
}

.horizontal-divider {
  border-top: black solid 1px;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <header>
    PAGE HEADER
  </header>
  <div class="horizontal-divider" id="header_content_divider"></div>
  <div id="content">
    <div class="vertical-divider hidden" style="display: none;"></div>
    <!-- Left Menu Bar -->
    <div id="menu_bar">
      <div id="tabs">
        <div class="tab">Tab 0</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 1</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 2</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 3</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 4</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 5</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 6</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 7</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 8</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 9</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 10</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 11</div>
        <div class="horizontal-divider"></div>
        <div class="tab">Tab 12</div>
      </div>
    </div>
    <div class="vertical-divider" id="left_main_divider"></div>
    <div id="main">
      <div id="main_header">
        MAIN HEADER
      </div>
      <div class="horizontal-divider"></div>
      <div id="main_content">
        <div id="wide">
          ThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContent
        </div>
        <div id="tall">
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
          <p>ThisIsTallContent</p>
        </div>
      </div>
    </div>

</body>

</html>

Ответы [ 2 ]

1 голос
/ 01 мая 2020

Чтобы этот макет работал, вам нужно знать как минимум пять CSS концепций.

Сначала я опубликую код с пояснениями в конце.

Код 

body {
  display: flex;
  flex-direction: column; /* will help with triggering overflow 
                             (by allowing use of flex properties further in) */
  height: 100vh;
  margin: 0; /* override default margins */
  font-family: Arial, Helvetica, sans-serif;
}

header {
  padding: 10px;
  background-color: lightgray;   
  border: 1px solid black;
}

#content {
  display: flex; /* children line up in a row */
  height: 50vh;  /* hard limi t help trigger overflow condition, 
                    while leaving plenty of space for the header */
  flex-grow: 1;  /* consume remaining height */
}

#menu_bar {
  height: 100%;  /* inherit parent height; essential for overflow to trigger */
  flex: 0 1 300px; /* space for tabs; max-width taken from individual tabs rule */
}

#tabs {
  overflow: auto; /* first scrollbar requirement met */
  height: 100%;  /* inherit parent height; essential for overflow to trigger */
  background-color: lightgreen; /* demo */
}

.tab {
  padding: 10px;
  /* max-width: 300px; */ /* rule moved to container */
  border-bottom: 1px solid black;
}


#main {
  flex: 1; /* consume all space (so box width not dependent on content */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0; /* override flex minimum width setting */
  border-left: 1px solid black;
}

#main_header {
  padding: 10px;
  background-color: yellow;
  border-bottom: 1px solid black;
}

#main_content {
  display: flex;
  flex-direction: column;
  height: 100%; /* can shrink to fit (flex-shrink: 1 default) */
  overflow: auto; /* second scrollbar requirement set */
  background-color: orange;
}

#wide {
  padding-top: 10px;
}

* {
  box-sizing: border-box;
}
<header>PAGE HEADER</header>
<div id="content">
  <div id="menu_bar">
    <div id="tabs">
      <div class="tab">Tab 0</div>
      <div class="tab">Tab 1</div>
      <div class="tab">Tab 2</div>
      <div class="tab">Tab 3</div>
      <div class="tab">Tab 4</div>
      <div class="tab">Tab 5</div>
      <div class="tab">Tab 6</div>
      <div class="tab">Tab 7</div>
      <div class="tab">Tab 8</div>
      <div class="tab">Tab 9</div>
      <div class="tab">Tab 10</div>
      <div class="tab">Tab 11</div>
      <div class="tab">Tab 12</div>
    </div>
  </div>
  <div id="main">
    <div id="main_header">MAIN HEADER</div>
    <div id="main_content">
      <div id="wide">
    ThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContent
      </div>
      <div id="tall">
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
        <p>ThisIsTallContent</p>
      </div>
    </div>
  </div>

jsFiddle demo

Пояснения

Как уже упоминалось во вступлении, есть несколько CSS концепций, которые необходимо понимать, чтобы этот макет работал.

  1. Свойству overflow необходимо жесткое ограничение , чтобы оно могло что-то переполнить. Без фиксированной длины нечего переполнять.

  2. Элементы Flex имеют минимальный размер, равный размеру контента , который иногда необходимо переопределить, чтобы контент аккуратно помещался в окне просмотра.

  3. Элементы сгибания по умолчанию может уменьшаться. Это означает, что вы можете установить для вложенных элементов Flex значение height: 100%, которое может запускаться и переполняться без переполнения контейнера.

  4. Элемент body имеет поле по умолчанию, установленное браузером. Вы можете переопределить этот параметр с помощью body { margin: 0 } и удалить ненужная вертикальная полоса прокрутки.

  5. Вам не нужно добавлять разделители в HTML. Это много лишнего и ненужного кода. Просто используйте CSS border.

0 голосов
/ 01 мая 2020

установлено на тело height: 100vh; width: 100%. vh - это окно просмотра, которое устанавливает высоту элемента в соответствии с высотой окна вашего браузера

...