Here is my code to stick the footer to bottom of the page:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?
First of all, the height of body, html and container (see element with class 'container') has to have height: 100%;
In this solution I have used flex box. It is supported by all modern browsers and IE11.
It's necessary to add the following properties to container:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
To move footer to bottom, just add to flex item
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
What about using Flexbox? It is supported by IE>=10.
To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.
The "upper"-one gets the value flex: 1, which is a shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.
Code snippet
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
You used min height 35 px. I think your content's height inside of footer is more than 35px. So check the margin or padding of all footer elements.
It will be better, if you can make a jsfiddle demo.
[SOLVED]
I found this to be working for my example:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Make a div fill the height of the remaining screen space
(42 answers)
Closed 1 year ago.
I am trying to use flexbox to have fixed height container ( two ) to be stuck to the bottom of the page and then have the other container take up the available space (flex-grow) . This is not giving me the desired effect so I'm not sure what I'm missing
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
</div>
.container {
height: 100%;
display: flex;
flex-direction: column;
background: black;
}
.one {
flex-grow: 1;
background: green
}
.two {
height: 90px;
background:pink;
}
Your block is limited to the place it occupies. You have to use the entire viewport in this case. Add this in your CSS :
html, body {
height: 100%;
}
The main thing that would help is height:100vh. Apart from that, to avoid scrollbar, you'll need to remove default margin and padding from html & body.
The vh unit is pretty convenient when you want the container tag to fill the available screen space without introducing vertical scrollbar.
html,
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
background: black;
}
.one {
flex-grow: 1;
background: green;
}
.two {
height: 90px;
background: pink;
}
<html>
<body>
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
</div>
</body>
</html>
Height (%) is used to define a height relative to parent's height. It depends on parent element height so you also need to set height:100% to html/body.
body, html{
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background: black;
}
.one {
flex-grow: 1;
background: green
}
.two {
height: 90px;
background:pink;
}
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
</div>
I want to make the footer stay at the bottom of every page without making so many classes.
What I need is a footer that stays at the bottom of every page, no matter if the content is too scarce, without being "sticky," or using position: fixed.
I've done my research and looked at other answers on other questions but they've either got so many classes, they use position: fixed, or they use JS.
Here's the code for the layout.pug file:
.footer-wrapper
footer © 2018 Demo Website
And the code that I tried in SCSS is here:
.footer-wrapper {
// min-height:100%;
position: relative;
display: flex;
flex-direction: column;
flex: 1;
}
footer {
background-color: #0A0A0A;
color: white;
// height: 60px;
bottom: 0;
text-align: center;
position: absolute;
width: 100%;
padding: 1.5rem;
// display: grid;
// margin-top: auto;
// padding:10px;
}
Thanks a lot!
Something like this should work. Let flex-grow property handle the height of the .content container.
<div class="main">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
<style>
.main {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100vh;
}
.content{ flex-grow: 1; }
</style>
There's a really cheap way of doing this, which is actually quite good.
Assuming you're using a header as well, you could do something like this:
<header>
<div id = "body">
<footer>
...
<style scoped = "scss">
#body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
margin-top: <header_height>;
margin-bottom: <footer_height>;
}
</style>
Basically it sets the body content to fill up the entire page, but leaves room for the header at the top of the page, and room for the footer at the bottom of the page (if there is no flexing). When there is not enough room to fit the body content on the page, the body div will flex in the column, automatically moving the footer with it.
Hope this helps!
I thought that IE 11 had full support for flexbox properties but I get a different behavior than on Chrome/Firefox
I simplified it to this simple example: I'm trying to have a 100% height div with a flex child inside that also grows to 100% height. It works in chrome and Firefox but on IE the flex child doesn't grow in height...
Fiddle: https://jsfiddle.net/7qgbkj0o/
body, html {
background-color: red;
min-height: 100%;
height: 100%;
padding: 0;
margin:0;
}
.p{
display: flex;
min-height: 100%;
}
.c1 {
flex-grow: 1;
background-color: gray;
}
<div class="p">
<div class="c1">
asdasd
</div>
</div>
On IE11: http://imgur.com/a/eNKIJ
On Chrome: http://imgur.com/a/xYmJW
I know there are probably alternatives to achieve this without using flexbox but in my real world case I really need to use flexbox here so what's wrong and how can I achieve this on IE11 using flexbox?
Seems IE11 has an issue with only having min-height.
Try adding a base height.
.p{
display: flex;
min-height:100%;
height: 100%;
}
body,
html {
background-color: red;
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.p {
display: flex;
min-height: 100%;
height: 100%;
}
.c1 {
flex: 1;
background-color: gray;
}
<div class="p">
<div class="c1">
asdasd
</div>
</div>
I had a similar case where this:
.container {min-height: 500px; height: auto;}
didn't work, but this:
.container {height: 500px;}
was perfectly aligned in IE.
Declaring specific height instead of auto should work..
I have a web page using a column flexbox, with fixed size header and footer, and a content area which takes up the remaining space. This works fine.
The content area is a row flexbox, and I have 2 square divs side by side. I am making them square by using padding-bottom. This works fine, unless the window is >2x the content area height. Then my squares start bleeding into the footer, because padding is based on element width.
I would like the squares to never overlap the footer. I'm ok with there just being dead space to the right of the squares. I would like to stick with flexbox and avoid floats if possible. Only modern browsers need be supported.
Is this possible with only CSS? Or is this a job for JS.
Fiddle
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#box {
display: flex;
flex-flow: column;
height: 100%;
}
div {
border: 1px solid tomato;
box-sizing: border-box;
margin: 0;
padding: 2px;
}
#header {
flex: 0 0 5em;
}
#footer {
flex: 0 0 5em;
}
#content {
background: blue;
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
min-height: 30%;
}
#content > div {
background: tomato;
border-color: black;
flex: 1 0 auto;
max-height: 50%;
padding-bottom: 50%;
}
<div id="box">
<div id="header">
<p><b>header</b>
</p>
</div>
<div id="content">
<div id='am'></div>
<div id='pm'></div>
</div>
<div id="footer">
<p><b>footer</b>
</p>
</div>
</div>
TIA!
Simple soluton:
#box
{
display: flex;
flex-flow: column;
min-height: 100%; /* this*/
}
JSfiddle Demo
Note: This assumes you want the page to overflow...but I didn't see any reference to containing the page height to the viewport.
I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
box-sizing: border-box;
padding:0 2em;
width: 70%;
}
.side-el {
box-sizing: border-box;
width: 30%;
}
<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
Here's a way to do this inspired by bootstrap:
.fixed-top {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This gives your flex-box room to breathe and do it's flex-box thing. If your flex-direction is column, you could use top, left, bottom instead.
This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed.
You can't.
As explained by the CSS2.1 spec:
Absolutely positioned boxes are taken out of the normal flow.
And the Flexible Box Layout spec confirms that:
An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.
(Emphasis mine)
#Daniel , I know this is very late but ... while the accepted answer is correct, I don't feel it's very helpful.
I had the same question (which is how I came across this post), and the solution I think I'll go with is to wrap the position fixed element within the flex element.
Here's a (very ugly) example
Relevant Markup
<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
<div class="Layout-aside-inner">
<button ng-click="collapsed = !collapsed">
<span ng-show="collapsed">></span>
<span ng-hide="collapsed"><</span>
</button>
<ul class="Layout-aside-content">
<li ng-repeat="i in items">{{i}}</li>
</ul>
</div>
</aside>
Relevant CSS
.Layout-aside {
order: 0;
min-width: 140px;
width: 140px;
background-color: rgba(0, 255, 0, .4);
transition: width .4s, min-width .4s;
}
.Layout-aside.isCollapsed {
min-width: 25px;
width: 25px;
}
.Layout-aside-inner {
position: fixed;
}
.Layout-aside.isCollapsed .Layout-aside-inner {
width: 25px;
}
.Layout-aside.isCollapsed .Layout-aside-content {
opacity: 0;
}
position:sticky was mentioned by Juozas Rastenis above but without code example.
Here's a minimalist example:
* {
box-sizing: border-box;
}
body {
display: flex;
margin: 0;
}
nav {
width: 20%;
height: 100vh;
top: 0; /* this is required for "sticky" to work */
position: sticky;
background: lightblue;
padding: 1rem;
}
main {
height: 3000px; /* cause scroll */
background: lightpink;
flex-grow: 1;
padding: 1rem;
}
<body>
<nav>
sidebar here
</nav>
<main>
content here
</main>
</body>
You can achieve it with a css alternative position: sticky
It acts great but the only problem is browser support (June 2018):
https://caniuse.com/#feat=css-sticky
Hope it gets better soon.
A far simpler solution would be to use overflow-y:scroll and height: 100vh on the main-el container. This will give the appearance of fixed position to the side-el container without resorting to position: fixed.
You are saying you want position:fixed;-like behavior that plays together with flexbox. As mentioned in the accepted answer, applying this property to an element drops it out of the normal flow, so this isn't really possible.
If what you want is to have a fixed sidebar .side-el and a scrollable content box .main-el as the items of a flex container, here's how you might do this:
Disable scrolling in the flex container's parent; let's assume it's
<body>, as you don't provide div.container's parent. Also, hard-set
it's height to viewport-height (100vh) so that no part of the body's
box remains outside view (imagine the body's box normally extending
beyond your screen to contain the entire document; you don't want
that, if you are to disable the ability to move the viewport via
scrolling).
Set the flex container's (.container) height to that of it's parent.
Selectively re-enable scrolling for the content box (.main-el).
In CSS:
body{
overflow: hidden;
height: 100vh;
}
.container {
display: flex;
height: 100%;
}
.main-el {
overflow-y: auto;
}
You can achieve this without position: fixed; by just adding overflow: auto; and height: 100%; to the flex-item that contains the long content:
.container {
display: flex;
}
.main-el {
padding:0 2em;
width: 70%;
overflow: auto;
height: 100%;
}
.side-el {
width: 30%;
}
<div class="container" style="background-color: blue; height: 300px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
I had the same issue, I actually just found a way to have flex-box, a width for the nav bar, and center it while in a fixed position.
nav {
display: flex;
height: 50px;
width: 90%;
left: 5%;
position: fixed;
}
I wanted to be able to have a flex-box nav bar in a fixed position but centered. So what I did was do the left 5% since that's equal to half of the 10% width left over. Try it out, it might help you! :)