Проблемы CSS при использовании vh и vw с FlexBox
Я хочу создать панель с ее основным содержимым (PAGE CONTENT) и расположенным справа списком командных кнопок с заголовком. Вся страница должна уменьшаться или увеличиваться в зависимости от области просмотра (это будет использоваться на сенсорном планшете, поэтому в альбомной / книжной ориентации необходимо пропорционально изменить размер всех элементов).
Вот мой фрагмент кода HTML:
.panel-container {
width: 100%;
display: flex;
flex-direction: row;
padding: 0px;
margin: 0px;
}
.panel-container-left {
flex-grow: 1;
flex-shrink: 0;
}
.panel-container-right {
justify-self: flex-end;
}
.title {
background-color: grey;
color: white;
margin: 5px;
width: 25vw;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.stacked {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
overflow-y: scroll;
}
.button {
background-color: blue;
color: white;
margin: 5px;
width: 25vw;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}<div class = "panel-container">
<div class = "panel-container-left">
PAGE CONTENT
<div class = "button">
Button Page
</div>
</div>
<div class = "panel-container-right">
<div class = "title">
TITLE
</div>
<div class = "stacked">
<div class = "button">
Button 1
</div>
<div class = "button">
Button 2
</div>
<div class = "button">
Button 3
</div>
<div class = "button">
Button 4
</div>
<div class = "button">
Button 5
</div>
<div class = "button">
Button 6
</div>
<div class = "button">
Button 7
</div>
<div class = "button">
Button 8
</div>
<div class = "button">
Button 9
</div>
<div class = "button">
Button 10
</div>
</div>
</div>
</div>Я не могу заставить работать правильную панель. Что мне нужно, так это сохранить все кнопки одинакового размера и одинакового размера заголовка панели и кнопки панели. Если высота уложенных кнопок увеличивается, мне нужно прокрутить по оси Y, но никогда не выходить за границы экрана и не терять пропорциональный размер по сравнению с заголовком и кнопкой панели.
В настоящее время кнопки панели сжимаются, чтобы держать в поле зрения все 10 кнопок, где я хотел прокрутку по оси Y с кнопками того же размера, что и кнопка панели.
@connexo: Готово. Я забыл об этой новой функции ...
Это не совсем новое ...
«Вся страница должна уменьшаться или увеличиваться в зависимости от области просмотра (это будет использоваться на сенсорном планшете, поэтому в альбомной / книжной ориентации необходимо пропорционально изменить размер всех элементов)». Есть ощущение, что для этого вам нужно пройти медиа-запросы ..
Ответы 2
Если я понял это правильно, вы должны попытаться установить максимальную ширину правой панели на 100vh, а затем добавить overflow-y для прокрутки.
.panel-container-right {
max-height: 100vh;
overflow-y: scroll;
}
Я задокументировал все изменения в CSS. Надеюсь это поможет.
.panel-container {
width: 100%;
display: flex;
/* flex-direction: row; NOT NECESSARY, IS THE DEFAULT */
padding: 0px;
margin: 0px;
}
/* NOT NECESSARY
.panel-container-left {
flex-grow: 1;
flex-shrink: 0;
}
*/
.panel-container-right {
/* justify-self: flex-end; THIS DOES NOT EXIST */
}
.title {
background-color: grey;
color: white;
margin: 5px;
width: 25vw;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.stacked {
/* display: flex;
flex-direction: column; */
width: 100%;
height: 80vh; /* TITLE IS 10VH + A BIT EXTRA FOR THE EFFECT */
overflow-y: scroll;
}
.button {
background-color: blue;
color: white;
margin: 5px;
width: 25vw;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}<div class = "panel-container">
<div class = "panel-container-left">
PAGE CONTENT
<div class = "button">
Button Page
</div>
</div>
<div class = "panel-container-right">
<div class = "title">
TITLE
</div>
<div class = "stacked">
<div class = "button">
Button 1
</div>
<div class = "button">
Button 2
</div>
<div class = "button">
Button 3
</div>
<div class = "button">
Button 4
</div>
<div class = "button">
Button 5
</div>
<div class = "button">
Button 6
</div>
<div class = "button">
Button 7
</div>
<div class = "button">
Button 8
</div>
<div class = "button">
Button 9
</div>
<div class = "button">
Button 10
</div>
</div>
</div>
</div>Что решило проблему, так это удаление display: flex из штабеля ... Я не могу понять почему, поскольку я открываю новый div section в качестве родительского раздела ...
@Mendes Взгляните сюда: stackoverflow.com/questions/14962468/…
Можете ли вы создать фрагмент кода прямо здесь, в своем вопросе? Это предпочтительный способ. Сайты с внешним кодом следует использовать только в том случае, если необходимые функции фрагмента недоступны в самом StackOverflow.