I used this guide to make my footer stick to the bottom : http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
This guide use flex box to do the job. It worked perfectly on Chrome and Firefox and even on Edge. But on IE11, all the elements collapse on each other like in this image :
Code demo :
body {
min-height: 100%;
position: relative;
}
.container {
display: flex;
min-height: 100vh;
height: 100%;
flex-direction: column;
}
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: green;
}
.Site-content {
flex: 1;
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
<body class="Site">
<div id="react-root">
<div class="container">
<main class="Site-content">Site</main>
<footer>Footer</footer>
</div>
</div>
</body>
Any idea how to fix this? Thanks in advance :-)
Just use following to make it working for IE11:
html, body{
height:100%;
}
Full Code:
html, body{
height:100%;
}
.Site {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: green;
}
.Site-content {
flex: 1;
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
<body class="Site">
<main class="Site-content">Site</main>
<footer>Footer</footer>
</body>
Working Fiddle link
<style>
.Site {
height: 100vh;
background-color: green;
}
main {
height: calc(100% - 50px);
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
</style>
This is because of the IE known bug. You can not use min-height and flexbox at the same time. Please refer https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
Try to update your IE or height instead of min-height, also try to avoid vh. I think that will work for you.
body {
min-height: 100%;
position: relative;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
}
.Site {
display: flex;
height: 100%;
flex-direction: column;
background-color: green;
}
.Site-content {
flex: 1;
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
Related
I am creating a div which is centered to the window. It's content can grow, and if it grows passed the size of the window, the content div should have it's scrollbar account for the overflow. But instead, the div just grows off the screen and gets clipped. If I set an explicit height on the content, everything works, but since I don't know the explicit height of the environment I cannot do that. What is the correct way to do this?
JSFiddle: https://jsfiddle.net/CodeVirtue/cjhz31xq
Here is the template:
<div class="fullscreen-overlay">
<div class="fullscreen-container">
<div class="window-with-titlebar">
<div class="titlebar">
<div class="titlebar-left">
Left
</div>
<div class="titlebar-right">
Right
</div>
</div>
<div class="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40
</div>
</div>
</div>
</div>
And all the CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.fullscreen-overlay {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 12px 12px;
}
.fullscreen-container {
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.window-with-titlebar {
background-color: yellow;
max-width: 100%;
max-height: 100%;
}
.titlebar {
background-color: green;
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
}
.titlebar-left {
background-color: darkgreen;
}
.titlebar-right {
background-color: lightgreen;
}
.content {
background-color: blue;
overflow-y: scroll;
max-width: 100%;
max-height: 100%;
}
I believe I was able to achieve what you are looking for by making the parent container use flexbox:
.window-with-titlebar {
background-color: yellow;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
I have a page like this:
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
flex: 1;
position: relative;
}
.innerWrapper {
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button>
</div>
</main>
<footer class="footer"></footer>
</div>
As I understand, innerWrapper is not getting 100% height of main because main's height is not defined explicitly, it's flex:1. Is it correct? How do I make innerWrapper get the height of main in this particular case?
Just remove the flex and the heigh properties from the children and add align-items: stretch; and display: flex; to the parent.
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
display: flex;
flex: 1;
align-items: stretch;
}
.innerWrapper {
background-color: red;
width: 100%;
justify-content: center;
align-items: center;
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button>
</div>
</main>
<footer class="footer"></footer>
</div>
Your .main is occupying its container's height/width. It is your .innerWrapper that is not occupying the height of its container.
The reason for this is that the height of .main is not explicit. According to this:
If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the value computes to 'auto'
You can change .main to be flex also and change .innerWrapper to have flex: 1:
.main {
flex: 1;
position: relative;
background-color: orange; // Added for visual only. Remove from your code.
display: flex;
flex-direction: column;
}
.innerWrapper {
flex: 1;
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
See it work here.
I think this is the thing you are trying to achieve...
Check the code. I have added comments to identify the code which is added...
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
flex: 1;
position: relative;
background-color:blue;
}
.innerWrapper {
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
/*code added here*/
position:absolute;
top:0;
bottom:0;
/* if you want to add button to center add this property here right:50%;*/
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button>
</div>
</main>
<footer class="footer"></footer>
</div>
If you make the display value block instead of flex at the class .innerWrapper
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-flow: column wrap;
min-height: 100vh;
height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
flex: 1 1 auto;
position: relative;
}
.innerWrapper {
height:100%;
background-color: red;
display: block;
text-align:center;
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button
</div>
</main>
<footer class="footer"></footer>
</div>
I am trying to fit 4 divs within the view bounds of a non-scrolling column flexbox but I can't seem to get it working.
What I want:
What I experience:
I have no idea what I am doing and just randomly permutating flex-related CSS fields to try and fix it haha. If someone could point out what is wrong I would love you forever.
Here is the gist of my code:
body {
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#header #firstContent #secondContent {
flex: 1 1 auto;
}
#header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
background-color: blue;
flex: 0 1 auto;
}
<body>
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
</body>
Try this below. And use object-fit if image doesn't expand or shrink as expected or aspect ratio changes.
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
flex: 1;
min-height: 0;
}
body {
margin: 0;
}
img {
object-fit: contain;
height: 100%;
width: auto;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Please check your container div id
<div id="flexcontainer">
change
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
to
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
try object-fit for img
img {
object-fit: contain;
height: 100%;
}
there is a few thing to fix in your CSS, typo and value used
html, /* to inherit height */
body {
margin: 0;
width: 100%;
height: 100%;
}
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0; /* force size calculation*/
}
#header,/* you meant each one of them */
#firstContent,
#secondContent {
flex: 1;
margin: 2px 5vw;/* for demo */
}
#header {
background-color: green;
font-weight: 700;
/* align-content: center; or did you forget display:flex here */
font-size: calc(1rem + 2vw);
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
display: flex;
min-height: 0; /* force size calculation*/
}
img {
max-height: 90%;/* whatever */
margin: auto;/* or align-content + justify-content : center on flex parent*/
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Allow the item holding the image to shrink below its content size.
Define the parameters of the image.
(Tested in Chrome, Firefox and Edge.)
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
min-height: 0;
background-color: blue;
}
#picture>img {
width: 100%;
max-height: 100%;
object-fit: contain;
}
#header {
background-color: green;
font-weight: 700;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
body {
margin: 0;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
jsFiddle demo
I've tidied up your html a little and simplified the CSS. You want to take the overflow: hidden off of the body tag, and give each of your elements a class instead of an id. Finally, simplify the image section by making the image tag itself a flexbox item:
html,
body {
height: 100%
}
body {
/*overflow: hidden;*/
margin: 0;
}
.flexContainer {
display: flex;
flex-direction: column;
height: 100%;
}
.flexContainer__header,
.flexContainer__firstContent,
.flexContainer__secondContent {
flex: 1 1 auto;
}
.flexContainer__header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
.flexContainer__firstContent {
background-color: red;
}
.flexContainer__secondContent {
background-color: yellow;
}
.flexContainer__picture {
display: block;
width: 100%;
}
<div class="flexContainer">
<div class="flexContainer__header">Title</div>
<img class="flexContainer__picture" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" />
<div class="flexContainer__firstContent">first</div>
<div class="flexContainer__secondContent">second</div>
</div>
I have the following html and css:
HTML:
<body style="height:100%;">
<div class="fb-container">
<div class"somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>
CSS:
.fb-container {
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
// min-height: 100%;
}
.somedatadiv {
width: 75%;
max-width: 345px;
backround: grey;
padding: 30px;
}
for some reason the flex container div is not stretching 100% of the body height.
(the browser I am using is chrome for this "demo/application/site")
You need to add display:flex to the parent tag for and then flex:1 to the child to enable the child to expand to 100% of parent.
.fb-container {
background-color:green;
flex: 1;
}
.somedatadiv {
width: 75%;
max-width: 345px;
background-color: grey;
padding: 30px;
}
<body style="height:100vh;display:flex;">
<div class="fb-container">
<div class="somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>
add this and it should work. Demo: https://jsfiddle.net/jacobgoh101/svtewj9j/
html,
body {
height: 100%;
}
body {
display: flex;
}
update: if you want the fb-container to stay full width
add flex: 1 1 100%; to it
.fb-container {
flex: 1 1 100%;
}
update: complete solution https://jsfiddle.net/jacobgoh101/svtewj9j/2/
html,
body {
height: 100%;
}
body {
display: flex;
}
.fb-container {
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
flex: 1 1 100%;
}
.somedatadiv {
flex: 1 1 75%;
max-width: 345px;
backround: grey;
padding: 30px;
box-sizing: border-box;
}
There was some code missplaced in the MCV template.
that was messing up the style/layout.
this post is not relevant for other users so it will be removed/deleted
update: Can not delete this post:
I have an HTML page with header/content/footer that uses flexbox model and contains <details> tag.
I need to make details content use maximum available height, meaning that when in opened state its content should occupy all space in its container (except for summary of course).
Here is my HTML/CSS code (http://jsfiddle.net/rtojycvk/2/):
HTML:
<div class="wrapper">
<div class="header">Header</div>
<div class="main">
Some text before details
<details class="details" open>
<summary>Details summary</summary>
<div class="content">Details content</div>
</details>
</div>
<div class="footer">Footer</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0; padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.header {
height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
}
.footer {
height: 50px;
background-color: green;
flex: 0 0 auto;
}
.content {
background-color: blue;
color: white;
flex: 1;
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
As you can see, the details tag itself takes all the available space, but not its content.
P.S. I need this to work only in Chrome.
http://jsfiddle.net/rtojycvk/16/
use position absolute on content, position relative on details, and calc() css (to offset the summary height)
.content {
background-color: lightgray;
color: black;
flex: 1;
display:flex;
position:absolute;
height: calc(100% - 18px);
width: 100%;
}
.details {
background-color: gray;
flex: 1;
display: flex;
flex-direction: column;
position:relative;
}
hope this helps! (I changed the colors cause they were a bit bright for me :p)
Absolute positioned .content and details relative.
fiddle
html, body {
height: 100%;
margin: 0; padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.header {
height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
}
.footer {
height: 50px;
background-color: green;
flex: 0 0 auto;
}
.content {
background-color: blue;
color: white;
flex: 1;
position: absolute;
top: 3%;
bottom: 0;
height: 97%;
width: 100%;
}
details {
position: relative;
}
summary{
height: 3%;
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
For those who prefer not to set absolutes positions, or can't do it, there is another way to accomplish it: using vh for height of .content:
html,
body {
margin: 0;
padding: 0;
height:100vh;
background: orange;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
height:100vh;
background: pink;
}
.header,
.footer {
height: 10vh;
min-height: 25px; /* (or max-height, or both!) */
max-height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.footer {
background-color: green;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */
}
.content {
background-color: blue;
color: white;
flex: 1;
display: flex;
flex-direction: column;
height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<header class="header">Header</header>
<main class="main">
Some text before details
<details class="details" open>
<summary>Details summary</summary>
<div class="content">Details content</div>
</details>
</main>
<footer class="footer">Footer</footer>
</div>
Fiddle's here: http://jsfiddle.net/ALXWebDev/wxm0v49c/
Hope it helps!