Блог

Главная - Вопросы по программированию - Переполнение приводит к появлению глобальной полосы прокрутки даже с родительским элементом `overflow: auto`

Переполнение приводит к появлению глобальной полосы прокрутки даже с родительским элементом `overflow: auto`

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы размер двух контейнеров (зеленого и красного в примере) составлял 100% доступного пространства (в примере все пространство, кроме заголовка). Второй столбец имеет большое содержимое, которое переполняется по вертикали. Я бы хотел, чтобы только во втором столбце была полоса прокрутки без основной полосы прокрутки. Если я удаляю заголовок, все работает так, как задумано, но с заголовком я вижу глобальную полосу прокрутки. Почему?

 body {
  padding: 0;
  margin: 0;
  height: 100%;
}

html {
  height: 100%;
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
  height: 100%;
}

.left {
  width: 200px;
  height: 100%;
  background: green;
}

.right {
  width: 200px;
  height: 100%;
  background: red;
  overflow: auto;
}  
 <div class="main">
<div>Header</div>
<div class="container">
  <div class="left"></div>
  <div class="right">
    <div style="height: 4000px;"></div>
  </div>
</div>
</div>

Ответ №1:

Это то, что вам нужно?

Проблема imho в том, что столбец также переполняет контейнер, который по умолчанию равен
overflow: visible

Я установил переполнение контейнера в скрытое
Затем я установил заголовок в 25 пикселей фиксированным (что необязательно)
Теперь левый столбец должен правильно занимать 100% высоты контейнера.
Правый столбец должен переполниться: прокрутите внутри родительского контейнера.

Если вы знаете, что правый столбец будет переполняться по вертикали, вы также можете использовать:
overflow-y: scroll; 

 body {
  padding: 0;
  margin: 0;
  height: 100%;
}

html {
  height: 100%;
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.left {
  width: 200px;
  height: 100%;
  background: green;
}

.right {
  width: 200px;
  height: 100%;
  background: red;
  overflow: auto;
}
#header {
  height: 25px;
}  
 <div class="main">
<div id="header">Header</div>
<div class="container">
  <div class="left"></div>
  <div class="right">
    <div style="height: 4000px;"></div>
  </div>
</div>
</div>

Поведение overflow: auto зависит от браузера:
https://developer.mozilla.org/de/docs/Web/CSS/overflow

Комментарии:

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

2. На самом деле я только что заметил, что ваш код уже работает в моем браузере, с каким браузером вы тестируете. Ваш код (и мой) отлично работает для меня (1 полоса прокрутки на красном div) в Chrome и safari на macos. Или я неправильно понял, чего вы хотите достичь?

3. Я только что проверил в Chrome / Firefox на Mac, ни моя, ни ваша версии не работают правильно. Я вижу две полосы прокрутки.

4. Отредактировал мой ответ

5. у вас есть объяснение для overflow: hidden для класса контейнера? Кажется таким случайным, почему там происходит переполнение?