user172586
Reputation: 49
Flexbox container for dynamic content
I am working on a single page template that will be used by a proprietary CMS. It is basically a header, 3 columns in majority of page, and a footer. In the middle column the CMS will inject content into it. The content can be of varying length.
I need the footer to not be fixed, so that everything resizes dynamically if the content is larger than the container's initial vh. How do I handle this?
<!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>Upvotes: 0
Views: 1563
Answers (1)
Adel Elkhodary
Reputation: 1647
just change the height: 80vh to min-height: 80vh;
<!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;
min-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>Upvotes: 1
Related Questions
- How I can manage child height according to dynamic content in flex box?
- Dynamic Flexbox width
- Flexbox dynamic layout
- flex item of dynamic width overflow flex container
- Special flexbox layout
- Fit boxes dynamically in a container with flexbox
- Flexbox: Multiple containers, containers on flex items?
- How to nest content inside a flex box 'holy grail' layout?
- using a flex item as a flex container
- Being Flexbox element as flexbox container too