Мобильная версияЯ хочу, чтобы страница была привязана к высоте браузера. С левой стороны находится панель инструментов, а затем две панели справа с нижним колонтитулом. В конечном итоге я хочу прокручивать по оси Y эти две панели независимо друг от друга (на данный момент только среднюю), предпочтительно оставляя нижний колонтитул на месте.
Я помещу здесь пример кода, но он вероятно, легче увидеть на codepen. Простите за яркие цвета — просто следите за границами элементов управления.
< pre class="snippet-code-css lang-css Prettyprint-override">
Код: Выделить всё
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
}
.flex-container-row {
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
.flex-container-column {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.flex-jfs {
justify-content: flex-start;
}
.flex-afs {
align-content: flex-start;
}
.flex-ac {
align-content: center;
}
.flex-aic {
align-items: center;
}
.flex-jc {
justify-content: center;
}
.flex-jsb {
justify-content: space-between;
}
.body-content {
height: 100vh;
width: 100vw;
flex-direction: row-reverse;
border: 4px solid cyan;
}
.toolbar-left {
background-color: blue;
padding: 5px;
border-right: 2px solid white;
gap: 20px;
height: 100vh;
color: white;
}
.content-layout {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "main" "footer";
grid-template-rows: 1fr 25px;
border: 4px solid green;
/*background-color: rgba(0, 125, 0, .3)*/
}
main {
flex: 1 0 auto;
grid-area: main;
}
footer {
grid-area: footer;
/*background-color: rgba(125, 125, 125, 0.5);*/
background-color: lightGray;
color: black;
border: 4px solid gray;
}
.main-container {
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr;
border: 4px solid red;
/*background-color: rgba(255, 0, 0, 0.5)*/
}
.data-container-with-loading {
display: flex;
flex-direction: column;
border 4px solid yellow;
/*background-color: rgba(125, 125, 0, 0.75)*/
}
.loading {
display: none;
}
.data-container {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
color: black;
border: 4px solid purple;
background-color: rgba(125, 0, 125, 0.5)
}
.side-container {
display: flex;
flex-direction: column;
/* background: var(--root-bg-color);
color: var(--root-fg-color);
font-size: 1em;*/
padding: 3px;
min-height: calc(1vh - 30px);
border: 4px solid orange;
/*background-color: rgba(200, 125, 0, 0.5)*/
}
p {
font-size: 17pt;
margin: 10px;
}Код: Выделить всё
Scroll This Panel
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Ut diam quam nulla porttitor massa id neque. A erat nam
at lectus urna duis convallis. Amet luctus venenatis lectus magna fringilla urna porttitor. Varius quam quisque id diam vel. Ut aliquam purus sit amet luctus venenatis lectus magna. Sed adipiscing diam donec adipiscing tristique. Tincidunt
praesent semper feugiat nibh sed. Sit amet purus gravida quis blandit turpis cursus in. Etiam tempor orci eu lobortis elementum nibh. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim diam vulputate ut pharetra sit amet.
Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Purus semper eget duis at tellus at.
At tempor commodo ullamcorper a lacus vestibulum sed arcu. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Massa placerat duis ultricies lacus sed turpis. Et molestie ac feugiat sed lectus vestibulum. Diam volutpat commodo
sed egestas egestas fringilla phasellus faucibus. Tincidunt vitae semper quis lectus. Consequat semper viverra nam libero justo. Ullamcorper sit amet risus nullam eget felis eget. Et magnis dis parturient montes nascetur. Quis commodo
odio aenean sed adipiscing diam donec. Adipiscing at in tellus integer.
Enim ut tellus elementum sagittis vitae et leo duis. Porta nibh venenatis cras sed felis. Bibendum est ultricies integer quis auctor elit sed vulputate. Amet cursus sit amet dictum sit amet justo donec. Eu lobortis elementum nibh tellus
molestie nunc. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Et malesuada fames ac turpis egestas sed tempus urna et. Nec feugiat
in fermentum posuere urna nec tincidunt praesent. Purus in mollis nunc sed id semper risus. Nec ullamcorper sit amet risus nullam eget felis. Sollicitudin aliquam ultrices sagittis orci a scelerisque.
Felis eget nunc lobortis mattis aliquam faucibus. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Enim tortor at auctor urna. Metus dictum at tempor commodo ullamcorper a. Massa id neque aliquam vestibulum morbi blandit
cursus. Lorem mollis aliquam ut porttitor. Tristique risus nec feugiat in fermentum posuere. Purus in mollis nunc sed id semper. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Nisl pretium fusce id velit ut.
Consectetur a erat nam at lectus urna duis convallis convallis. Gravida quis blandit turpis cursus. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Bibendum est ultricies integer quis auctor elit sed vulputate. Posuere urna
nec tincidunt praesent semper feugiat nibh sed. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Volutpat sed cras ornare arcu dui vivamus arcu felis. Ultrices dui sapien eget mi proin sed libero enim sed. Nunc sed velit
dignissim sodales ut eu. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Ac turpis egestas integer eget aliquet nibh praesent
tristique magna. Massa sed elementum tempus egestas sed sed risus. Auctor elit sed vulputate mi.
[h4]Side Data Goes Here[/h4]
footer
toolbar
Подробнее здесь: https://stackoverflow.com/questions/782 ... flex-panel
