Я работаю над одностраничным шаблоном, который будет использоваться проприетарной CMS. Это в основном заголовок, 3 столбца в большинстве страниц и нижний колонтитул. В средней колонке CMS будет вводить контент в нее. Содержание может быть различной длины.
Мне нужно, чтобы нижний колонтитул не фиксировался, чтобы все динамически изменялось, если содержимое больше исходного vh контейнера. Как мне справиться с этим?
<!doctype html>
<header>
<style type="text/css">
html, body {
margin: 0;
}
#header {
display: flex;
background: #000000;
height: 10vh;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 2px solid black;
}
#header-left {
background: red;
flex-basis: 50%;
flex-shrink: 0;
}
#header-right {
background: green;
flex-basis: 50%;
flex-shrink: 0;
align-content: flex-end;
}
#content-container {
flex-direction: row;
display: flex;
background: #cccccc;
height: 80vh;
justify-content: space-between;
}
#sidebar-left {
background: purple;
flex-basis: 20%;
}
#sidebar-right {
background: yellow;
flex-basis: 15%;
}
#content {
border-left: 2px solid black;
border-right: 2px solid black;
flex-basis: 65%;
flex-grow:
}
#footer {
display: flex;
background: white;
height: 60px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
border-top: 2px solid black;
}
#footer-left {
background: pink;
flex-basis: 50%;
}
#footer-right {
background: orange;
flex-basis: 50%;
align-content: flex-end;
}
</style>
</header>
<body>
<div id="header">
<div id="header-left">
HEADER-LEFT HERE
</div>
<div id="header-right">
HEADER-RIGHT HERE
</div>
</div>
<div id="content-container">
<div id="sidebar-left">
SIDEBAR-LEFT
</div>
<div id="content">
CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum
</div>
<div id="sidebar-right">
SIDEBAR-RIGHT
</div>
</div>
<div id="footer">
<div id="footer-left">
FOOTER-LEFT
</div>
<div id="footer-right">
FOOTER-RIGHT
</div>
</div>
</body>
</html>