#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
для класса контейнера? Кажется таким случайным, почему там происходит переполнение?