Блог

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

Я не понимаю, почему появляется это переполнение, поскольку все области прокручиваются и имеют высоту 100%.

Я бы хотел, чтобы в content div не отображалось прокрутки, и это side и main отображается на 100% доступной высоты с внутренним заполнением.

То, что я пробовал:

• Установите отступы во внутренних элементах, пока это работает, я бы хотел избежать этого
• Использование flex, но та же проблема
• Использование полей для элементов, но я также хотел бы избежать этого

Есть ли способ заставить его работать таким образом, не устанавливая отступы во внутренних элементах или поля на внешних элементах?

—> Скрипка <—

Стили

 html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: grid;
  grid-template-areas:
        "a a a"
        "b b c"
        "b b c";
  grid-template-columns: auto auto max-content;
  grid-template-rows: max-content auto;
  height: 100%;
  overflow: auto;
}
.header {
  grid-area: a;
  text-align: center;
  background-color: gold;
  height: 50px;
}
.shortcut {
  grid-area: c;
  background-color: LightBlue;
}

.content {
  grid-area: b;
  display: grid;
  grid-template-columns: 1fr 3fr;
  height: 100%;
  overflow: auto;
}

.side {
  display: grid;
  height: 100%;
  overflow: auto;
  gap: 32px;
  
  padding: 32px; /* <---- IF I REMOVE PADDING HERE IT WILL WORK AS EXPECTED (EXCEPT I LOOSE THE PADDING) */ 
  
  .sub-side {
    display: grid;
    height: 100%;
    overflow: auto;
    
    amp;.first {
      background-color: LightGreen;
    }
    amp;.second {
      background-color: LightCyan;
    }
  }
}

.main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  height: 100%;
  overflow: auto;
  
  padding: 32px; /* <---- IF I REMOVE PADDING HERE IT WILL WORK AS EXPECTED (EXCEPT I LOOSE THE PADDING) */ 
  
  .list {
    height: 100%;
    overflow: auto;
  }
  
  .widgets {
    display: grid;
    height: 100%;
    overflow: auto;
    background-color: LightCoral;
  }
}

.widgets {
  > div {
    height: 200px;
  }
}
 

HTML

 <div class="container">
  <div class="header"> Header </div>
  <div class="shortcut">
    <div>shrtct 1</div>
    <div>shrtct 2</div>
    <div>shrtct 3</div>
    <div>shrtct 4</div>
    <div>shrtct 5</div>
    <div>shrtct 6</div>
    <div>shrtct 7</div>
    <div>shrtct 8</div>
    <div>shrtct 9</div>
  </div>
  <div class="content">
    <div class="side">
      <div class="sub-side first">
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
      </div>
      <div class="sub-side second">
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
      </div>
    </div>
    <div class="main">
      <div class="list">
        <div>List item 1</div>
        <div>List item 2</div>
        <div>List item 3</div>
      </div>
      <div class="widgets"> 
        <div>
         Widget 1
        </div>
        <div>
         Widget 2
        </div>
        <div>
         Widget 2
        </div>
      </div>
    </div>
  </div>
</div>
 

введите .main и .side измените свою высоту со 100% на height:auto; , и это должно дать вам желаемый результат.

Скрипка: https://jsfiddle.net/caq8ojs9 /

Или вы также можете просто изменить свой overflow: auto; на overflow: hidden; в .content