Делители высоты 100vh, выходящие за пределы экрана
У меня есть несколько div-оберток внутри div-контейнера. Если есть только один элемент div-обертки, он должен отображаться в середине экрана. Я добился этого с помощью height: 100vh в контейнере div. Но когда я добавляю элементы div-обертки в нижнюю часть контейнера div, верхние элементы div-оболочки выходят за пределы верхнего экрана. Если я удалю height: 100vh, эта проблема будет предотвращена, но тогда, если есть только один div-оболочка, он не будет показывать центр на экране. Он застрял наверху.
Я просто хочу, чтобы, если есть один элемент div-обертки, он должен отображаться в середине экрана, а при добавлении нескольких элементов div верхний элемент остается вверху и прокручивается, чтобы просмотреть нижние элементы div. Для наглядности добавил скриншоты ожидаемого поведения. 1 div-обертканесколько элементов-оберток
body {
background-color: #216092;
line-height: 1.4;
}
.message-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.message-wrapper {
max-width: 640px;
width: calc(100% - 40px);
padding: 44px;
margin-bottom: 28px;
min-width: 320px;
min-height: 338px;
overflow: hidden;
}
.panel {
margin-bottom: 28px !important;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}<div class = "message-container">
<div class = "message-wrapper panel panel-default">Div1</div>
<div class = "message-wrapper panel panel-default">Div2</div>
<div class = "message-wrapper panel panel-default">Div3</div>
</div>
Ответы 4
Просто измените .message-container { min-height: 100dvh; }:
body {
background-color: #216092;
line-height: 1.4;
margin: 0;
}
.message-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100dvh;
padding: 32px 24px;
}
.message-wrapper {
max-width: 640px;
width: calc(100% - 40px);
padding: 44px;
margin-bottom: 28px;
min-width: 320px;
min-height: 338px;
overflow: hidden;
}
.panel {
margin-bottom: 28px !important;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}<div class = "message-container">
<div class = "message-wrapper panel panel-default">Div1</div>
<div class = "message-wrapper panel panel-default">Div2</div>
<div class = "message-wrapper panel panel-default">Div3</div>
</div>Самое простое решение этой проблемы — обновить класс message-containerheight: 100vh; до min-height: 100vh;, как показано ниже.
Установка высоты элемента message-container на 100vh (высота области просмотра) обрезает контент, если он длиннее высоты экрана. Обновив его до минимальной высоты, вы достигнете высоты экрана минимум 100 и увеличите скорость реагирования, когда содержимое длиннее высоты экрана. Надеюсь, это объясняет разницу.
Подробнее можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
body {
background-color: #216092;
line-height: 1.4;
}
.message-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.message-wrapper {
max-width: 640px;
width: calc(100% - 40px);
padding: 44px;
margin-bottom: 28px;
min-width: 320px;
min-height: 338px;
overflow: hidden;
}
.panel {
margin-bottom: 28px !important;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}<div class = "message-container">
<div class = "message-wrapper panel panel-default">Div1</div>
<div class = "message-wrapper panel panel-default">Div2</div>
<div class = "message-wrapper panel panel-default">Div3</div>
</div>Вам нужно использовать safe center, чтобы избежать такого рода переполнения: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#safe
безопасный
Если элемент переполняет контейнер выравнивания, то элемент выравнивается так, как если бы был запущен режим выравнивания. Желаемое выравнивание не будет реализовано.
Фрагмент ниже, чтобы продемонстрировать его поведение.
body {
background-color: #216092;
line-height: 1.4;
}
.message-container {
display: flex;
flex-direction: column;
justify-content: safe center;
align-items: safe center;
height: 100vh;
}
.message-wrapper {
max-width: 640px;
width: calc(100% - 40px);
padding: 44px;
margin-bottom: 28px;
min-width: 320px;
min-height: 338px;
overflow: hidden;
}
.panel {
margin-bottom: 28px !important;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}<div class = "message-container">
<div class = "message-wrapper panel panel-default">Div1</div>
<div class = "message-wrapper panel panel-default">Div2</div>
<div class = "message-wrapper panel panel-default">Div3</div>
</div>Простое решение — просто разрешить переполнение в .message-container:
.message-container {
overflow: auto;
}