I am using the flexbox to lay out a web app. It works, except for the main content area. The "router-view" is the expected full height. But the div inside of this is NOT full height of the router-view?
How do I make the div with id of "make-full-height" full height?
I have tried setting the height to 100%, but this has no effect.
html
<div class="full-screen flex-container-column">
<div class="header no-flex">
Fixed Header
</div>
<!--The router-view IS full height-->
<router-view class="flexible">
<div id="make-full-height">
How do I make this div full height?
</div>
</router-view>
<div class="footer no-flex">
Fixed Footer
</div>
</div>
css
.full-screen {
height: 100vh;
}
.flex-container-column {
display: flex;
flex-direction: column;
}
.no-flex {
flex: 0 0 auto;
overflow: auto;
}
.footer {
height: 30px;
background: #555;
color: white;
}
.header{
height: 50px;
background: #555;
color: white;
}
.flex-container {
flex: 1 1 auto;
display: flex;
overflow: hidden;
}
.left, .right {
width: 200px;
background: #eee;
}
.flexible {
flex: 1 1 auto;
}
Set the <router-view to have display: flex, and set flex:1 for the #make-full-height. This way #make-full-height will fill it's container since there are no other children.
.full-screen {
height: 100vh;
}
.flex-container-column {
display: flex;
flex-direction: column;
}
.no-flex {
flex: 0 0 auto;
overflow: auto;
}
.footer {
height: 30px;
background: #555;
color: white;
}
.header{
height: 50px;
background: #555;
color: white;
}
.flex-container {
flex: 1 1 auto;
display: flex;
overflow: hidden;
}
.left, .right {
width: 200px;
background: #eee;
}
.flexible {
flex: 1 1 auto;
background-color: #88F;
display: flex;
}
#make-full-height {
flex : 1;
background-color: #8F8;
}
<div class="full-screen flex-container-column">
<div class="header no-flex">
Fixed Header
</div>
<!--The router-view IS full height-->
<router-view class="flexible">
<div id="make-full-height">
How do I make this div full height?
</div>
</router-view>
<div class="footer no-flex">
Fixed Footer
</div>
</div>
Related
I am trying to create a responsive navigation bar, similar to the one on Stack Overflow. I have attached an image of the layout I'm trying to achieve.
For simplicity, I added some values to make it easier to follow. There is the outer div that encapsulates the whole page, outer-wrapper and the main div that encapsulates the main content (navigation bar, main content, and footer), main-wrapper.
Now suppose that outer-wrapper is 1000px wide and main-wrapper is 800px wide, then there is 100px of buffer on the left and right side. When the window shrinks, I want the buffer to be used up before any of the main content changes.
CSS
.outer-wrapper {
width: 100%;
}
.main-wrapper {
width: 800px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
position: relative;
}
.nav-home {
position: fixed;
top: -30px;
left: -30px;
height: 60px;
width: 100%;
padding: 20px 20px 0px 20px;
display: flex;
justify-content: space-around;
}
}
HTML
<div class='outer-wrapper'>
<div class='main-wrapper'>
<div class='nav-bar'>...</div>
<div class='main-content'>...</div>
<div class='footer'>...</div>
</div>
</div>
The problem is when the window shrinks to match the width of main-wrapper at 800px, there is still a left and right margin in the navigation bar. How would I ensure the width of the navigation bar matches the width of the main content and footer when the left and right margin is shrunk to 0?
Thanks.
I stripped out some of your styles from the .nav-bar class and it seems to be performing as you require - am I missing something?
I've added colours to help visualise the resizing.
.outer-wrapper {
background-color: yellow;
width: 100%;
}
.main-wrapper {
background-color: blue;
width: 800px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
position: relative;
}
.nav-bar {
background-color: red;
justify-content: space-around;
}
.main-content {
background-color: green;
}
.footer {
background-color: purple;
}
<div class='outer-wrapper'>
<div class='main-wrapper'>
<div class='nav-bar'>Nav Bar</div>
<div class='main-content'>Main Content</div>
<div class='footer'>Footer</div>
</div>
</div>
.outer-wrapper {
width: 100%;
}
.main-wrapper {
width: 800px;
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
margin: 0 auto;
}
.main-wrapper > * {
padding: 10px;
flex: 1 100%;
}
.nav-bar {
background: tomato;
}
.footer {
background: lightgreen;
}
.main-content {
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
#media all and (min-width: 600px) {
.aside {
flex: 1 0 0;
}
}
#media all and (min-width: 800px) {
.main-content {
flex: 3 0px;
}
.aside-1 {
order: 1;
}
.main-content {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
body {
padding: 2em;
}
<div class="outer-wrapper">
<div class="main-wrapper">
<nav class="nav-bar">Navbar</nav>
<main class="main-content">content</main>
<aside class="aside aside-1">aside 1</aside>
<aside class="aside aside-2">aside 2</aside>
<footer class="footer">footer</footer>
</div>
</div>
this is the code that I made, hopefully it will help you and what you expect
I have setup the following layout. The content__item elements (which are commented below) are overflowing vertically outside main container.
.root {
display: flex;
height: 100vh;
background-color: gray;
}
.nav {
width: 16rem;
background-color: red;
}
.main {
flex-grow: 1;
background-color: green;
}
.menu {
height: 4rem;
background-color: blue;
}
.content {
display: flex;
height: 100%;
padding: 2rem;
}
.content__item {
flex: 1;
margin-left: 1rem;
background-color: white;
}
<div className="root">
<nav className="nav"></nav>
<main className="main">
<div className="menu"></div>
<div className="content">
<!-- Overflowing -->
<div className="content__item"></div>
<div className="content__item"></div>
<div className="content__item"></div>
</div>
</main>
</div>
I am pretty sure its a flexbox bug. I tried using min-height: 0 on the container but it still doesn't work. I setup an environment here for reference.
The reason the content_items are overflowing is because height: 100% causes problems with flex. However if you remove that, the elements don't appear to fill the available height. This is because their parent (the content div) is not the child of a flex element, so it is in fact this element and not the content__item that isn't taking up the available height.
We can fix this by adding display:flex to the main div (the parent of content)... however now we have another problem! This makes the other child of content (the nav element) appears to the side. To fix this, we can use flex-direction: column;
The main changes you need to make this work as as follows:
.main {
flex-grow: 1; /* you already have this to allow the children grow */
display: flex; /* Add this so the content element can use the full height */
flex-direction: column; /* Add this to make the children stack one below another */
}
.content {
display: flex; /* you already had this */
flex:1; /* Add this to make it take up the available height */
}
.content__item {
flex: 1; /* You don't actually need this now */
}
Working Example:
Also FYI, you need to set the body margin to 0 - otherwise the 100vh extends larger than the screen as it is getting added to the default margin.
body { margin:0; }
.root {
display: flex;
height: 100vh;
background-color: gray;
}
.nav {
width: 16rem;
background-color: red;
}
.main {
flex-grow: 1;
background-color: green;
display:flex;
flex-direction:column;
}
.menu {
height: 4rem;
background-color: blue;
}
.content {
display: flex;
padding: 2rem;
flex:1;
}
.content__item {
margin-left: 1rem;
background-color: white;
}
<div class="root">
<nav class="nav"></nav>
<main class="main">
<div class="menu"></div>
<div class="content">
<!-- Overflowing -->
<div class="content__item">some text here</div>
<div class="content__item">some text here</div>
<div class="content__item">some text here</div>
</div>
</main>
</div>
body, html {
margin: 0;
}
.root {
display: flex;
height: 100vh;
background-color: gray;
}
.nav {
width: 16rem;
background-color: red;
}
.main {
flex-grow: 1;
background-color: green;
display: flex;
flex-direction: column;
}
.menu {
height: 4rem;
background-color: blue;
}
.content {
display: flex;
padding: 2rem;
flex: 1;
}
.content__item {
flex: 1;
margin-left: 1rem;
background-color: white;
}
<div class="root">
<nav class="nav"></nav>
<main class="main">
<div class="menu"></div>
<div class="content">
<!-- Overflowing -->
<div class="content__item">a</div>
<div class="content__item">b</div>
<div class="content__item">c</div>
</div>
</main>
</div>
I have a layout that is mainly divided into 3 parts and the middle one should take a full height. And it does.
However, I need an additional div which will play a role of the backdrop and here the problem comes. The child doesn't want to take 100% height.
Here .body is a div that is being stretched when there is not enough content and .bg-gray is the one I want to take its parent full height.
Is there a way achieve this without using relative + absolute positioning?
Also, I'm looking for the answer to my question: why is this happening that way.
html, body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
}
.bg-gray {
background-color: #eee;
min-height: 100%;
flex: 1;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
Apply flexbox to the .body div.
.body {
flex: 1;
display: flex;
flex-direction: column;
}
html,
body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
display: flex;
flex-direction: column;
}
.bg-gray {
background-color: darkgrey;
min-height: 100%;
flex: 1;
}
.bg-gray div {
background: lightblue;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
I have the following structure, where the number of names (.name) in .list is dynamic. What i would like to achieve is when content (depending on n of .names) is longer than .parent's fixed height, both .children fit inside the .parent (inherit height). Lack of space would be solved with .list getting a scrollbar (overflow:auto).
Height inheritance works well with single child, but I am having huge problems when there are two or more.
JSFIDDLE HERE
HTML
<div id="grandparent">
<div id="parent">
<div id="list" class="children">
<div class="name">john</div>
<div class="name">mike</div>
<div class="name">jack</div>
<div class="name">terry</div>
</div>
<div id="footer" class="children">
<div>footer</div>
</div>
</div>
</div>
CSS
body, html {
margin: 0;
width: 100%;
height: 100%;
}
div {
box-sizing: border-box;
}
#grandparent {
background-color:yellow;
display:flex;
align-items:center;
width:100%;
height: 100%;
flex: 1;
}
.children, .children div {
padding: 5px;
}
.children {
max-height: inherit;
}
.children div {
width: 100%;
max-height: inherit;
}
#list {
overflow: auto;
padding-bottom:0;
}
#footer {
padding-top:0;
}
.name {
background-color: green;
}
#footer div {
background-color: pink;
}
#parent {
background-color: blue;
margin: 0 auto;
max-height: 100px;
}
P.S. sorry for the code mess, i was just testing out different options.
Add this to your code:
#parent {
display: flex;
flex-direction: column;
}
body,
html {
margin: 0;
width: 100%;
height: 100%;
}
div {
box-sizing: border-box;
}
#grandparent {
background-color: yellow;
display: flex;
align-items: center;
width: 100%;
height: 100%;
flex: 1;
}
.children,
.children div {
padding: 5px;
}
.children {
max-height: inherit;
}
.children div {
width: 100%;
max-height: inherit;
}
#list {
overflow: auto;
padding-bottom: 0;
}
#footer {
padding-top: 0;
}
.name {
background-color: green;
}
#footer div {
background-color: pink;
}
#parent {
background-color: blue;
margin: 0 auto;
max-height: 100px;
/* new */
display: flex;
flex-direction: column;
}
<div id="grandparent">
<div id="parent">
<div id="list" class="children">
<div class="name">john</div>
<div class="name">mike</div>
<div class="name">jack</div>
<div class="name">terry</div>
</div>
<div id="footer" class="children">
<div>footer</div>
</div>
</div>
</div>
jsFiddle demo
Because flex items are set to flex-shrink: 1 by default, they will reduce their size in order to not overflow the container.
So I have a flexbox but I'm having trouble understanding why the first child's padding gets ignored when the second child's content overflows.
here's an example when the second child's content aren't overflowing.
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 10vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
Here's an example when the child's content are overflowing
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 100vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
you can see in the second example that the title's height has greatly reduced.
It's because you're using flex css, which tries to accommodate all the children. If the title is supposed to not change in size no matter what, you need to set its flex-shrink to 0.
So try changing the css to:
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
flex-shrink: 0;
}