Currently I use this CSS to place a div (.child_bottom) at the bottom of its parent and another div above it (.child) because I know the height of (.child_bottom).
The parent at a variable height.
.parent
{
position:relative;
}
.child
{
position:absolute;
bottom:250px;
}
.child_bottom
{
position:absolute;
bottom:0;
height:250px;
}
<div class="parent">
<div class="child"></div>
<div class="child_bottom"></div>
</div>
But I would like to obtain the same thing with a variable height of .child_bottom, how to do?
Thank you in advance for your help.
Using flex would allow you to remove all of the absolute positioning:
.parent {
height: 400px;
outline: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.child {
background: green;
}
.child_bottom {
background: orange;
height: 250px;
}
<div class="parent">
<div class="child">CHILD</div>
<div class="child_bottom">CHILD_BOTTOM</div>
</div>
If you did wish to add content before .child, remove the justify-content and make this content flex: 1:
.parent {
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
height: 400px;
outline: 1px solid blue;
}
.child {
background: green;
}
.child_bottom {
background: orange;
height: 250px;
}
.other_content {
background: yellow;
flex: 1;
}
<div class="parent">
<div class="other_content">
OTHER_CONTENT (Fills the space)
</div>
<div class="child">CHILD</div>
<div class="child_bottom">CHILD_BOTTOM</div>
</div>
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed last year.
I have the following markup:
.layout {
display: flex;
flex-direction: column;
background-color: gray;
height: 100vh;
}
.app-bar {
background-color: lightblue;
}
.app-drawer {
background-color: black;
color: white;
flex-grow: 1;
}
.app-sidebar-container {
}
<div class="layout">
<div id="app-bar-container">
<div class="app-bar">APP BAR</div>
</div>
<div id="app-sidebar-container" class="app-sidebar-container">
<div class="app-drawer">DRAWER AND CONTENT</div>
</div>
</div
How should I modify this in order to get the drawer and content black div to stretch the entire remaining layout element (gray)?
Thanks.
flex-grow only works for direct child.
.layout {
display: flex;
flex-direction: column;
background-color: gray;
height: 100vh;
}
.app-bar {
background-color: lightblue;
}
.app-drawer {
background-color: black;
color: white;
/* new line */
height: 100%;
}
.app-sidebar-container {
/* new line */
flex-grow: 1;
}
<div class="layout">
<div id="app-bar-container">
<div class="app-bar">APP BAR</div>
</div>
<div id="app-sidebar-container" class="app-sidebar-container">
<div class="app-drawer">DRAWER AND CONTENT</div>
</div>
</div
Give the background-color to the .app-sidebar-container class and give that height: 100%.
That will fill make the element stretch to the entire grey area.
Alternatively you could give both the .app-sidebar-container and the .app-drawer a height of 100%.
Both should work.
change your css like this:
.layout {
display: flex;
flex-direction: column;
background-color: gray;
height: 100vh;
}
#app-bar-container {
flex-grow: 0.1
}
.app-bar {
background-color: lightblue;
height: 100%;
}
.app-sidebar-container {
flex-grow: 1;
}
.app-drawer {
height: 100%;
background-color: black;
color: white;
flex-grow: 1;
}
I cannot understand WHY I am not getting this:
.container {
width: 600px;
height: 400px;
border: 3px solid green;
}
.cg-panel {
display: flex;
flex-flow: column;
align-items: stretch;
justify-content: center;
}
.cg-panel .content {
flex: 1;
background-color: tomato;
}
<div class="container">
<div class="cg-panel">
<div class="content"></div>
</div>
</div>
I, for the life of me, cannot understand why the content panel does not vertically stretch the entire container. What is the purpose of "flex:1" if it isn't going to work? Am I not reading the documentation correctly?
There's nothing in your CSS that is expanding the height of .cg-panel to fit its parent .container.
Adding height: 100%; to .cg-panel fixes this:
.container {
width: 600px;
height: 400px;
border: 3px solid green;
}
.cg-panel {
display: flex;
flex-flow: column;
align-items: stretch;
justify-content: center;
height: 100%; /* add this */
}
.cg-panel .content {
flex: 1;
background-color: tomato;
}
<div class="container">
<div class="cg-panel">
<div class="content"></div>
</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
Following is my code in which I am trying to align the last div (class="four") to the right and I am using align-self: flex-end; but still its not going to the right. Let me know what I am doing wrong here.
.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
display: inline-block;
align-self: flex-end;
}
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
margin-left:auto; will do the job.
One use of auto margins in the main axis is to separate flex items
into distinct "groups"...
.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
display: inline-block;
margin-left:auto;
}
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
use margin-left: auto
.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
display: inline-block;
margin-left: auto;
}
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
Align self property is used to adjust the flex items on the cross axis.
Please try this code.
.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
margin-left: auto;
}
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
Another way to do.
.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
position: relative;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
right: 0;
position: absolute;
}
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
I am trying to take
<div></div>
<div></div>
<div></div>
Three sequential divs and turn it into below. Where red is div 1, green is div 2, blue is div 3.
I can do this with floats, something like
.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }
But I can't seem to get it working in flexbox, is this possible?
The Legit Method:
*Recommended
.flex-row {
flex-direction: row;
display: flex;
}
.flex-column {
flex-direction: column;
display: flex;
}
.flex-body {
display: flex;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 200px;
width: 300px;
}
<div class="flex-body">
<div class="flex-row">
<div style="background: #0980cc;"></div>
</div>
<div class="flex-column">
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
</div>
The Hackish Method:
*Not Recommended (I'm sure you'll notice why)
.flex-body {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-end;
align-content: stretch;
align-items: stretch;
transform: rotate(90deg);
max-width: 500px;
margin: auto;
}
.flex-body div {
border: 1px solid white;
height: 300px;
flex: 1 1 200px;
}
.flex-body div:last-of-type {
flex: 1 1 300px;
height: 300px;
}
<div class="flex-body">
<div style="background: #0980cc;"></div>
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
After thinking about this a little more, it is possible with flexbox. The container just has to have a defined height (%, px or vh) will work.
http://codeply.com/go/U1DCKAx85d
body {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100vh;
}
.a {
flex: 0 0 100%;
background: red;
}
.b, .c {
flex: 0 0 50%;
background: green;
}
.c {
background: blue;
}
Using flexbox is very simple, you just need a container for these three div elements.
Let's define a div with a .box class and add the div elements. Also let's add three classes for the colors: .red, .green and .blue and two classes to handle the columns left and right.
<div class="box">
<div class="left red"></div>
<div class="right green"></div>
<div class="right blue"></div>
</div>
Now we define the box class as a flexbox:
.box {
display: flex;
...
}
Then we define the direction as column (vertical) and if it can be flowed wrap:
.box {
...
flex-flow: column wrap;
...
}
Also, we can define the dimensions of the div elements. left will be 45% of the parent width and 100% of the parent height.
.left {
width: 45%;
height: 100%;
}
While right will be 55% of the parent width and 50% (half) of the parent height.
.right {
width: 55%;
height: 50%;
}
Full example:
.box {
display: flex;
flex-flow: column wrap;
width: 400px;
height: 100px;
}
.red {
background: #cc092f;
}
.green {
background: #09cc69;
}
.blue {
background: #0980cc;
}
.left {
width: 45%;
height: 100%;
}
.right {
width: 55%;
height: 50%;
}
<div class="box">
<div class="left red"></div>
<div class="right green"></div>
<div class="right blue"></div>
</div>
I have a parent div that holds two children. One of the children will not always be displayed. How do I make the other child div the fill the height of the parent without overflowing?
My first child that won't always be displayed has a fixed height. I tried making the second child a height of 100%, which works if the first child isn't displayed, but when it is the second child overflows.
Here's a fiddle of my issue:
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
}
.child1 {
height: 30px;
background: green;
}
.child2 {
height: 100%;
background: blue;
}
http://jsfiddle.net/4fdf8ksy/
You could use a flexbox layout.
Just set the .parent element's display to flex and add flex-direction: column:
Updated Example
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.child1 {
height: 30px;
background: green;
}
.child2 {
height: 100%;
background: blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
You can use vh instead of %. It means the height should be 100% view post device.
Jsfiddle
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
display: block;
}
.child1 {
height: 30px;
background: green;
display: none;
}
.child2 {
height: 100vh;
background: blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent {
height: 400px;
width: 400px;
background: red;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.child1 {
height: 30px;
background: green;
}
.child2 {
height: 100%;
background: blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>