Maybe I want something impossible.
I want a website with only a single column styled with flexbox. The purpose is that only one column stretches its height to the footer regardless the size of the content of the column. Something like below structure:
I try to reach that with this code (I am using bootstrap):
<div class="container-fluid">
<div class="row">
<header class="col-md-12">
stuff...
</header>
<div class="col-md-1 col-a">
stuff...
</div>
<div class="col-md-10 col-b">
Stuff...
</div>
<div class="col-md-1 col-c">
<div class="col-c-child">
Stuff..
</div>
</div>
<footer class="col-md-12">
Stuff
</footer>
</div>
</div>
And then adding in the CSS this specific for the col-c and col-c-child:
.col-c {
display: flex;
flex-direction: column;
height: 100%;
}
.col-c-child {
flex: 1;
}
But is not working.
Any idea?
THE SOLUTION:
Create a row for the header, other for the content and other for the footer, that is - don't have everything in the same row.
Build a div-wrapper englobing col-a, col-b and col-c with display:flex and flex-direction: row;
get rid of col-c-child
col-c with flex: 1;
Thanks to #jelleB who elucidated me for part of it.
Put the header and the footer in different rows.
You should build a div below col-a (without content)
Use min-height: 100% on the row where you put col-a/col-b/col-c in
Give this a shot
I suspect your problem lies in the height:100%
If I am not mistaken, you cannot do that unless the parent container has its height defined. If the parent container's height is also defined as a percentage then the parent's parent container's height must also be defined. This hierarchy continues up to the body tag.
If you are able to wrap your middle divs, you can do the following:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.container #body {
display: flex;
flex-direction: row;
flex-grow: 1;
}
header,
footer {
width: 100%;
}
.left,
.right {
width: 100px; /*change to whatever width you want*/
}
.center {
flex-grow: 1;
}
/*styles for demo*/
header,
footer {
height: 50px;
background: blue;
}
.left,
.right {
background: green;
}
.center {
background: red
}
<div class="container">
<header></header>
<div id="body">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<footer></footer>
</div>
Related
I have the following html layout:
<div class="wrapper">
<div class="row one">
<div class="col one"><!-- some content here --></div>
<div class="col two"><!-- some content here --></div>
</div>
<div class="row two"><!-- some content here --></div>
</div>
So I have two rows (content and footer) and the first row has two columns.
The footer's (row two) height is not set and is defined from it's content.
How can I force my content area (row one) to stretch so the entire wrapper div takes 100% of screen's height?
Some indicative (not working) css here:
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
.row.one {
width: 100%;
display: flex;
}
.row.two {
width: 100%;
}
.row.one .col.one {}
.row.one .col.two {}
Setting the height of the wrapper to the height of the viewport, and then stretching the flexbox contents (column... not row) vertically has always worked well for me.
.wrapper {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
height: 100vh;
width: 100vw; /* or whatever */
}
.row {
flex: auto;
width: 100%;
...
}
Try this:
.wrapper {
display: inline-block;
height: 100vh;
width: 100%;
}
.row.one {
display: flex;
height: 100%;
}
.row.two {
}
.row.one .col.one {}
.row.one .col.two {}
css viewheight will achieve what you want.
100vh applied to .row.one makes the div occupy the full visible height.
.row.one {
background: pink;
height: 100vh;
}
<div class="wrapper">
<div class="row one">
<div class="col one">some content here </div>
<div class="col two">some other content here </div>
</div>
<div class="row two">footer content</div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Percentage Height HTML 5/CSS
(7 answers)
Flexbox fill available space vertically
(2 answers)
Closed 3 years ago.
Consider the following code:
.container {
display: flex;
flex-direction: column;
}
.header {
flex: 1;
background-color: red;
}
.content {
flex: 1;
background-color: blue;
height: 100%;
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1>
</div>
</div>
Why is my CONTENT not getting full available height (from HEADER bottom to the bottom of page) ? How to solve it ?
I'm putting this answer to clear up a few things mentioned in the comments, if it's not appropiate due to the question already having an answer I'll delete this.
By making the changes I proposed, we set the .container's height to 100vh, to explicitly define that it must have the full viewport's height, without this, the .container only has the needed height to contain the elements inside of it.
This applies the same to the body and html elements.
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 1;
background-color: red;
}
.content {
flex: 1;
background-color: blue;
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1>
</div>
</div>
Using percentages to define a height or width require some reference to calculate how much space that % unit is; so for example:
If we set a width of 1000px for .container, we can set its children's width to say, 50% and 100% and they will resize accordingly to 500px and 1000px because they have the 1000px reference from their parent.
EDIT: As noted by #Temani, this reference is always present for the width property, so using percentages for width will never fail, even if we don't specify an explicit width in a parent container.
.container {
display: flex;
flex-direction: column;
width: 1000px;
}
.header {
flex: 1;
width: 50%;
background-color: red;
}
.content {
flex: 1;
background-color: blue;
width: 100%
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1>
</div>
</div>
The same happens with the height property; we define a specific
height for the parent, and the children's height can be set with percentages since now they have a reference.
.container {
display: flex;
flex-direction: column;
height: 500px;
}
.header {
height: 20%;
background-color: red;
}
.content {
background-color: blue;
height: 80%
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1>
</div>
</div>
Your container is missing an height , you can use height:100vh; to fill window's height.
You can also use % , but you need to inherit a valid value from a parent. In this case, it can be take from html, send to body, and finally used by your container:(example in this duplicate)
html,body,.container {height:100%;}
example with vh
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
/*or min-height*/ height: 100vh;
}
.header {
/* flex: 1; not needed */
background-color: red;
}
.content {
flex: 1;
background-color: blue;
/*height: 100%; not needed */
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1>
</div>
</div>
Its going to depend on what you want to ultimately do the page and how you are going to use the page.
You can set your .container full page width & height:
.container {
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
and then grow/shrink your containers as needed:
.header{ flex: 1 }
.content { flex: 2 } // twice as large as header
How #ivanS95 says '.container only has a height based on its content'.
Instead, you can do this by setting all parents (html, body) elements to 100% also the .container at 100% too, and changing your flex propierty of .header not allowing it to grow.
Example here:
flex: 0 1;
https://codepen.io/pen/
This question was very nicely answered before by #Pebbl at:
Make a div fill the height of the remaining screen space
please check it.
I'm trying to create the following basic layout:
And I'm currently using the following basic HTML markup (with slightly different class names and additional markup within each of the HTML elements):
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">
</div>
<div class="purpleSection">
</div>
<div class="pinkSection">
</div>
<div class="redSection">
</div>
</div>
<div class="rightOrangeStrip">
</div>
</div>
</div>
<div class="lightPurpleContent">
</div>
</div>
And then the following starting CSS for the markup above:
.sidebar {
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
top: 0;
width: 300px;
}
.topGreenStrip {
height: 5px;
justify-self: flex-start;
}
.sidebarContainer {
flex-grow: 1;
justify-self: stretch;
}
The problem I'm having though is that because I start by stretching everything vertically with flexbox, I don't know how to then stretch things horizontally but still keep everything 100% the height of the screen.
That is, minus the 5px green top strip, I want the rest of the sidebar to occupy 100% the height of the screen. The large pink section should fill in whatever the brown, purple and red sections don't naturally.
I was able to get that part working without the orange bar by using justify-self: flex-start;, justify-self: stretch; and justify-self: flex-end;. However, once I add the orange bar in, I don't know how to keep doing what I'm doing.
The orange bar has a bit of dynamic content in it, so I can't set a static width, and the brown, purple, pink and red sections should use whatever width is not taken up by the orange bar (I'm assuming with flex-grow: 1;).
Anyway, how do I get this layout where (within the sidebar), I'm trying to stretch things both to 100% the height and 100% the width? Can I do this with just flexbox, or am I going to have to used positioned/floated elements to get this all to work?
Sorry for the vagueness, but after trying several things and getting nowhere close, I'm not sure where to begin. Thank you.
You need to make use of flex-direction: column on certain elements to stack the children. Also, using flex: 1 will force that element to grow and fill available space in it's parent.
By setting height: 100% on the html and body you can stretch .siteContainer to be the full height of the window.
I've added the background colours so you can see the layout in action.
html,
body {
margin: 0;
height: 100%;
}
.siteContainer {
display: flex;
height: 100%;
}
.sidebar {
display: flex;
flex-direction: column;
width: 300px;
}
.topGreenStrip {
height: 5px;
}
.sidebarContainer {
flex: 1;
display: flex;
}
.sidebarInnerContainer {
display: flex;
flex-direction: column;
flex: 1;
}
.pinkSection,
.lightPurpleContent {
flex: 1;
}
.topGreenStrip { background: green; }
.brownSection { background: peru; }
.purpleSection { background: darkviolet ; }
.pinkSection { background: pink; }
.redSection { background: red; }
.rightOrangeStrip { background: orange; }
.lightPurpleContent { background: lavender; }
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">green
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">brown
</div>
<div class="purpleSection">purple
</div>
<div class="pinkSection">pink
</div>
<div class="redSection">red
</div>
</div>
<div class="rightOrangeStrip">orange
</div>
</div>
</div>
<div class="lightPurpleContent">lightpurple
</div>
</div>
I have an React application and having a slightly bigger problem with some CSS stuff.
I have an view which is divided in 2 parts. But those two parts are lying in one bigger component. The left part is displaying some contacts and on the right I want to display details of those contacts. Now I want to make the left part scrollable like a list, but the right part just stay fixed on its position. Also the height of the left part should always stay as high as the current screen size. I am using Bulma CSS as my base CSS framework.
This is my HTML:
<div class="pane main-content" id="mainPane">
<div class="contacts-view">
<h1 class="title">My Title</h1>
<div class="">Other Stuff</div>
<div class="columns">
<div class="column is-3">
<div class="columns is-multiline">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
<div class="column is-9"></div>
</div>
</div>
</div>
This is a quick sketch of how it looks:
Current relevant CSS:
.main-content {
background-color: #fff;
padding: 20px;
}
.pane {
position: relative;
overflow-y: auto;
flex: 1;
}
.columns {
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
}
.column {
display: block;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
padding: 0.75rem;
}
For better explanation. The component with class column is-3 should be scrollable but all other parts should stay fixed with no scroll.
I tried:
.is-3
overflow:hidden;
overflow-y:scroll;
But I found out that I have to set the height of is-3 because otherwise my screen is just expanded to the bottom. But I can not set a fixed height to it, because my screen size is dynamic and depended on the size of #mainPane. But I can also not set it to 100% because then the screen is also expanded at the bottom. Do you have any suggestions how I can solve this with CSS ?
Thanks in advance :)
You can use flexbox layout.
jsFiddle
body {
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background: lightblue;
}
.content {
flex: 1;
display: flex;
min-height: 0; /*ADDED 2021*/
}
.sidebar {
background: lightgreen;
overflow: auto;
}
.main {
flex: 1;
background: pink;
overflow: auto;
}
<div class="container">
<div class="header">header</div>
<div class="content">
<div class="sidebar">
<div style="height:200vh;">sidebar</div>
</div>
<div class="main">
<div style="height:200vh;">main</div>
</div>
</div>
</div>
I've read many posts on flexbox but still have an issue that bugs me.
I want to have a sticky footer using flexbox as per this guide.
But then, inside my page content I would like to have as many nested divs I like and have them taking the same height of the parent.
The problem is, setting height: 100% on each child (as I would do in a non-flexbox scenario) works differently when flexbox is enabled. This results in the children getting more height (overflow the parent).
To make this more clear here's a codepen without flexbox
and a codepen with flexbox
You can see in the flexbox scenario the footer gets the green bakground even if I don't want that.
HTML:
<div class="sticky-footer-container">
<div class="sticky-footer-content">
<div class="page-container">
<div class="main-menu">
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-footer">
Some footer content
</div>
</div>
SCSS:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
background: silver;
padding: 0;
margin: 0;
}
.sticky-footer-container {
height: 100%;
display: flex;
flex-direction: column;
.sticky-footer-content {
height: 100%;
background: blue;
flex: 1;
div {
height: 100%;
}
.main-menu-selection {
height: 50%;
}
}
}
.some-other-class {
background: green;
}
In order to solve this, ANY nested div has to become a flex-container ?
In other words, is there any way to "stop the flex propagation" at some point of the tree, so all the divs gets the parent height without overflow?
display:flexbox is not really a valid value :)
you need to set height as well and eventually inherit it from html :
.sticky-footer-container {
display: flex;
flex-direction: column;
}
.sticky-footer-content {
flex: 1;
}
/* let's inherit some height to pull the footer down */
html,
body,
.sticky-footer-container {
height: 100%;
margin: 0;
}
.sticky-footer {
display: flex;/* flex item can be flexboxes as well */
background: turquoise;
align-items: center;
justify-content: center;
min-height: 3em;
}
<div class="sticky-footer-container">
<div class="sticky-footer-content">
<div class="page-container">
<div class="main-menu">
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-footer">
Here my footer
</div>
</div>