I need to have a 100% height flexbox with just a children footer with 50px.
Is possible without have the calc(100% - 50px) ?
here my try:
body, html{
height:100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color:red;
}
.flex-1 {
background-color: yellow;
}
.flex-A {
background-color: blue;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-1-child {
background-color: purple;
overflow-y: auto;
height: calc(100% - 50px);
}
.flex-2-child {
background-color: green;
height: 50px;
}
.text{
height: 500px;
}
<div class="container">
<div class="flex-1">test</div>
<div class="flex-A">
<div class="flex-1-child">
<div class="text">test2</div>
</div>
<div class="flex-2-child">
<div>test</div>
</div>
</div>
</div>
I don't have the 100% height.
Thank you for your help.
Change height: calc(100% - 50px); to flex: 1; and it will expand its height maximally.
I guess this is what you want?
https://jsfiddle.net/shuding/3ss44wuk/1
Simply use flex: 1 on the dynamic element.
body, html{
height:100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color:red;
}
.flex-1 {
background-color: yellow;
}
.flex-A {
background-color: blue;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-1-child {
background-color: purple;
overflow-y: auto;
flex: 1;
}
.flex-2-child {
background-color: green;
height: 50px;
}
.text{
height: 500px;
}
<div class="container">
<div class="flex-1">test</div>
<div class="flex-A">
<div class="flex-1-child">
<div class="text">test2</div>
</div>
<div class="flex-2-child">
<div>test</div>
</div>
</div>
</div>
Related
My question is similar to this one: I'm trying to contain an aspect-ratio element within its parent element. One difference though, this aspect-ratio element has siblings—a header and a footer—and all this nice family should be center-aligned and share a common width.
Images are worth a thousand words:
GIFs are worth a thousand images:
I'm close to that result, but I'm not quite there yet:
body {
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
height: 50px;
}
#paper {
aspect-ratio: 1;
background-color: red;
margin: auto;
max-height: 100%;
overflow: hidden;
width: 100%;
}
#wrapper {
align-content: center;
display: grid;
height: 100%;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Any CSS wizard to help me out?
Not sure if you can get all the requirements but here is the best I could do (seems to work on chrome only)
body {
background-color: lightgrey;
margin: 0;
}
#footer,
#header {
background-color: blue;
height: 50px;
}
#paper {
aspect-ratio: 1;
background-color: red;
max-height: 100%;
max-width: 100vw;
}
#wrapper {
place-content: center;
display: grid;
height: 100vmin;
margin-block: max(0px,50vh - 50vmin);
grid-template-rows: auto minmax(0, 1fr) auto;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
If the 50px is known you can do like below:
body {
background-color: lightgrey;
margin: 0;
--h: 50px; /* the fixed height */
}
#footer,
#header {
background-color: blue;
height: var(--h);
}
#paper {
aspect-ratio: 1;
background-color: red;
width: min(100vw,100vh - 2*var(--h));
}
#wrapper {
place-content: center;
display: grid;
height: min(100vh, 100vw + 2*var(--h));
margin-block: max(0px, (100vh - 100vw - 2*var(--h))/2);
grid-template-rows: auto minmax(0, 1fr) auto;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Try this solution, all the magic happens in grid-template-columns and grid-template-rows.
html {
background-color: lightgrey;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
--footer-header-height: 50px;
align-content: center;
display: grid;
height: 100vh;
grid-template-columns: 1fr minmax(auto, calc(100vh - var(--footer-header-height) * 2)) 1fr;
grid-template-rows: auto minmax(auto, 100vw) auto;
}
#footer,
#header {
grid-column: 2;
background-color: blue;
height: var(--footer-header-height);
}
#paper {
grid-column: 2;
aspect-ratio: 1 / 1;
background-color: red;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Actually Container Queries enable us to solve this kind of problems elegantly.
Support for this feature is currently very bad (see here), but it's part of Interop 2022 so I guess it'll look different by the end of the year.
I post this as an answer as it might help someone in the future 👽👋
Note that you currently need to turn on a flag on Chrome to be able to test it.
body {
container-type: size;
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
}
#paper {
background-color: red;
}
#wrapper {
align-content: center;
display: grid;
grid-template-columns: min(100cqi, (100cqb - 100px));
grid-template-rows: 50px min(100cqb - 100px, 100cqi) 50px;
justify-content: center;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Here's the same code but relying on viewport units (works in all browsers):
body {
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
}
#paper {
background-color: red;
}
#wrapper {
align-content: center;
display: grid;
grid-template-columns: min(100vw, (100vh - 100px));
grid-template-rows: 50px min(100vh - 100px, 100vw) 50px;
height: 100%;
justify-content: center;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
In the snippet below you can see that the green .bottom stops at the width of the screen using a width of 100%. Can I force the width to match exactly the parent width? In this case 1000px.
The problem is that the red .top is a variable width so setting a fixed width for the green .bottom is not an option.
.parent {
width: 700px;
}
div.container {
overflow: auto;
background-color: yellow;
display: flex;
flex-direction: column;
height: 100px;
}
div.top {
background-color: red;
height: 40px;
width: 1000px;
}
div.bottom {
background-color: green;
height: 20px;
width: 100%;
}
<div class="parent">
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
Use CSS grid instead of flexbox:
.parent {
width: 700px;
}
div.container {
overflow: auto;
background-color: yellow;
display: grid;
align-content: start; /* don't forget this */
height: 100px;
}
div.top {
background-color: red;
height: 40px;
width: 1000px;
}
div.bottom {
background-color: green;
height: 20px;
}
<div class="parent">
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
EDIT: This may be a problem with Safari 14.0.x for macOS.
I’m trying to make the .block element in the middle .flex-item span the full height of its parent, but it instead just collapses.
body {
height: calc(100vh - 2 * 4px);
margin: 4px;
}
div {
box-sizing: border-box;
border-width: 0.8vh;
border-style: solid;
padding: 2vh;
}
.flex {
height: 100%;
border-color: red;
display: flex;
flex-direction: column;
}
.flex-item {
border-color: blue;
}
.box {
height: 15vh;
border-color: green;
padding: 0;
}
.flex-item:last-child > .box {
height: 8vh;
}
.grow {
flex-grow: 1;
}
.grow > .box {
height: 100%;
}
<div class="flex">
<div class="flex-item">
<div class="box"></div>
</div>
<div class="flex-item grow">
<div class="box two"></div>
</div>
<div class="flex-item">
<div class="box"></div>
</div>
</div>
I could edit the last of the code to what’s below to make it work, but I’d rather not have one child be displayed as flex while the others are displayed as block. Is there another way I could go about doing this?
.grow {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grow > .box {
flex-grow: 1;
}
body {
height: calc(100vh - 2 * 4px);
margin: 4px;
}
div {
box-sizing: border-box;
border-width: 0.8vh;
border-style: solid;
padding: 2vh;
}
.flex {
height: 100%;
border-color: red;
display: flex;
flex-direction: column;
}
.flex-item {
border-color: blue;
}
.box {
height: 15vh;
border-color: green;
padding: 0;
}
.flex-item:last-child > .box {
height: 8vh;
}
.grow {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grow > .box {
flex-grow: 1;
}
<div class="flex">
<div class="flex-item">
<div class="box"></div>
</div>
<div class="flex-item grow">
<div class="box"></div>
</div>
<div class="flex-item">
<div class="box"></div>
</div>
</div>
You could set it as follow:
.grow {
flex-grow: 1;
height: 100%;
}
.grow > .box {
height: 100%;
}
This does seem to the trick for me in Safari.
If you don't want to use flexbox on the .grow element.
I want to create a layout where we have a header (responsive, with any height), footer (responsive, with any height), and content that fills the rest of space. Content should have two columns - first(right) that fits the content and second(left) that is very long and should have overflow with y-axis scrolling.
Detailed snipped with HTML and CSS attached.
I have problem with making them work inside of flexible height. I know how to make it work when I have only two columns, but with a responsive footer and header, I have problems.
I also have a code snippet inside of codepen
Thanks in advance for any help :)
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
height: 1000px;
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
Set a fixed height to your .box.content div element.
And use min-height in .column-with-overflow-content insted of height
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
min-height: 1000px; /* use min-height */
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box.content { height: 100px; } /* set height to columns container */
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
Please consider this style:
.root {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
}
.content {
flex-grow: 1;
background-color: pink;
}
What I want to achieve is that the content element will take the remaining height of the viewport, but it takes only his content height.
HTML:
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
<div class="content">
content
</div>
</div>
Codepen
The problem is the surrounding .root. You have to increase the height of the .root to the remaining space. So you have to set the height:100vh; on .root. Try the following solution:
body, html {
margin:0;
padding:0;
}
.root {
display: flex;
flex-direction: column;
height: 100vh;
align-items:stretch;
align-content:stretch;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
}
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
.content {
flex-grow:1;
background-color: pink;
}
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
<div class="content">content</div>
</div>
.content {
flex-grow: 1;
background-color: pink;
height: 100vh;
}
Set the :root to 100vh (100% of the viewport height) instead 100%
You can simply add
height: 100% to html, body
add height to 20% for root div
add height to 80% for content div
will solve your problem
html,body {
height: 100%;
}
Here is the jsFiddle
Hope it helps :)
I think your misunderstanding what flex does. Flex is used to align its children, not to fill a viewport. Heres another solution.
https://jsfiddle.net/rob_primacy/1wnpr50s/
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
</div>
<div class="content">
content
</div>
and the css
.root {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
position: relative;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.content {
background-color: pink;
position: absolute;
height: 100%;
left: 8px;
right: 8px;
}
Use like this
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
body{
margin:0;
}
.root {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
}
.content {
flex-grow: 1;
background-color: pink;
height:100%;
width:100%;
position: fixed;
}
</style>
</head>
<body>
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
<div class="content">
content
</div>
</div>
</body>
</html>
Your codepen linked works fine. I do not understand where you get stuck.
You could basicly build your template from 2 containers :example with header and main
html,
body {
height: 100%;/* or just : 100vh; for body only */
margin: 0;
}
body {
display: flex;
flex-direction: column;
/* width and margin:auto is avalaible */
}
header {
/* height: 50px;or do not set any and let grow from its content */
background: gray;
}
main {
flex: 1;/* will fill up all space left */
background: lightblue;
/* overflow:auto; optionnal if you do not want html to scroll and keep header fixed */
}
<header>
whatever <br/> sizes me
</header>
<main>
content
</main>
Make it simple to start with :)