Develop Reference

how to revese a css-animation after trigger it?

Good evening, I'm a beginner front-end developer who is trying to implement sketches of Pinterest for training.
I've found this gif for the signup/login page but I have a major issue for implementing animation, I don't have any idea for reversing the animation when the user clicks on the signup button can anybody tell me how can I reverse an animation?
function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
.containerForm {
width:50px;height:50px;background-color:red;
}
.slide {
animation: slide 2s ease-in-out;
position: relative;
animation-fill-mode: forwards;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
overflow: hidden;
visibility: visible;
}
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
but as I've said I don't have an idea for the second step
Link of gif

you can add another css class and make use of the animation-direction property.
ie
.slide-back{
animation: slide 2s ease-in-out;
position: relative;
animation-direction: reverse;
}

function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
function reverse() {
var element = document.getElementById("containerForm")
element.classList.remove("slide")
}
.containerForm {
width:50px;
height:50px;
background-color:red;
transform: translateX(0);
transition: transform 2s;
}
.slide {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
<button onclick="reverse()">click</button>

transition works too:
example:
*{margin:0;}
#tst {
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 100vh;
background: #555;
}
label {
margin: auto;
appearance: button;
cursor: pointer;
min-width: 6em;
text-align: center;
}
#a,
#b {/*hides radios */
position: absolute;
right: 100vw;
}
[for="a"],
#c {
grid-row: 1;
grid-column: 1;
}
#c {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
background: white;
border: solid;
transition: 0.5s;
font-size:2vw;
}
#a:checked~#c {
transform: translatex(0)
}
#b:checked~#c {
transform: translatex(100%)
}
h1 {
margin: auto;
}
#c p[class] {
margin: auto;
grid-column: 1;
grid-row: 2;
transition: 0.25s;
background: inherit;
color: #164fb7;
font-size: 3vw;
}
#c p.b {
opacity: 0;
color: tomato;
}
#b:checked~#c p.b {
opacity: 1
}
/* there were no js nor animation nor absolute positionning ;) */
<div id="tst">
<input id="a" type=radio name=toggle>
<input id="b" type=radio name=toggle>
<label for="a">Left</label>
<label for="b">Right</label>
<div id="c">
<h1>here or there ?</h1>
<p class="a">Standing on the left</p>
<p class="b">Standing on the right</p>
</div>
</div>

Instead of adding a class I suggest using the animation-play-state property and adding event listeners:
one click listener to the button
one animationiteration to the div
simply change the play state from paused to running
Let me show you what I mean:
const element = document.getElementById("containerForm");
const btn = document.querySelector("button");
function animation() {
element.style.animationPlayState = "running";
}
function stopAnimation() {
element.style.animationPlayState = "paused";
}
btn.addEventListener("click", animation);
element.addEventListener("animationiteration", stopAnimation);
.containerForm {
width: 50px;
height: 50px;
background-color: red;
animation: slide 2s ease-in-out infinite alternate paused;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button>click</button>

Is it possible to link progressive web app to toast

I have code for a toast like below.
html
<button onclick="launch_toast()">Show Toast</button>
<div id="toast"><div id="img">Icon</div><div id="desc">A notification message..</div></div>
css
#toast {
visibility: hidden;
max-width: 50px;
height: 50px;
/*margin-left: -125px;*/
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#toast #img{
width: 50px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
background-color: #111;
color: #fff;
}
#toast #desc{
color: #fff;
padding: 16px;
overflow: hidden;
white-space: nowrap;
}
#toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes expand {
from {min-width: 50px}
to {min-width: 350px}
}
#keyframes expand {
from {min-width: 50px}
to {min-width: 350px}
}
#-webkit-keyframes stay {
from {min-width: 350px}
to {min-width: 350px}
}
#keyframes stay {
from {min-width: 350px}
to {min-width: 350px}
}
#-webkit-keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
#keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
js
function launch_toast() {
var x = document.getElementById("toast");
x.className = "show";
setTimeout(function(){
x.className = x.className.replace("show", "");
}, 5000);
}
I want to know how to link this code to my progressive web app so that on clicking the user is able to download the PWA. My site.

You should get a reference to the beforeinstallpromt event, on which you can call the promt function later on in your toast. You can get this event by adding an event listener as follows (source: Google):
let installPromptEvent;
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
Hence, in your launch_toast function, you can launch the prompt:
function launch_toast(){
installPromptEvent.prompt();
}
This is, of course, assuming that your manifest is configured well and that your service worker could also be registered. If the device does not support this, the beforeinstallprompt will not be fired and your reference to installPromptEvent will be undefined. The event will also not fire when the PWA is already installed on the device.

Pop out automatically disappear after some seconds

I found this on how to make a popout on click in Javascript, however I am trying to alter it a bit so when it's clicked on it should automatically disappear again after some seconds... But i can't get it to work, i tried to set the animation to
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
It dissapears but it still comes back again... why is that?
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

I think you need to set the default state of .popup .show to opacity: 0 because after the animation runs it will return to the default state you define.
.popup .show {
opacity: 0; /* add this */
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
opacity: 0;
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

Your fade in should be:
#keyframes fadeIn {
0% {opacity: 0;}
100%{opacity: 1;}
}
By setting it back to 0 at 100% like you do, it does a fadeIn / fadeOut animation
EDIT: Sorry I got the question wrong

SlideUp effect with jQuery

I'm currently working on my website footer and would like it if the user clicks Contact Us that a yellow div appears from behind the footer.
Here is what I'm working on so far right now, but I can't seem to position the yellow box hidden behind the footer. The yellow area will be roughly 300px in height when visible.
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "40px"});
}
});
footer {
width:100%;
display:block;
background:#ccc;
position:fixed;
bottom:0;
left:0
}
.container {
overflow:hidden;
height: 60px;
float:left;
}
.one {
position: relative;
bottom: 0;
background-color: lightblue;
z-index: 1;
cursor:pointer;
overflow: hidden;
height: 40px;
}
.two {
position: relative;
bottom: 40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
<div class="two">I slide!<br>And I am higher than the div before me...</div>
</div>
<footer>
<ul>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</footer>
Thank you.

Here's work slide:
.container {
overflow: hidden;
height: 60px;
float: left;
position: absolute; /*add this, and */
bottom: 20px; /* this*//*pixel based on what you wish*/
}
UPDATED DEMO:
Check Update Fiddle Here

Try this one. It uses jQuery animate to slide.
http://jsfiddle.net/armqc25a/
JS
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".container").animate({"bottom": "0px"});
}
else
{
clicked=true;
$(".container").animate({"bottom": "40px"});
}
});
CSS
footer {
width:100%;
background:#ccc;
position: fixed;
bottom:0;
height: 40px;
left:0;
z-index: 1000;
}
.container {
overflow:hidden;
height: 40px;
position: absolute;
bottom:0;
width: 100%;
z-index: 1;
}
.one {
position: relative;
background-color: lightblue;
cursor:pointer;
}
.two {
position: relative;
background-color: yellow;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}

Detect height change and adjust position of a div?

Is there a way you can code javascript to be able to detect the height of your browser and then move a div accordingly to the bottom of that browsers height?
Im wanting to get a footer to stay at the bottom of the page constantly as when I do this with CSS there tends to be a large space of nothing when heading to phone and tablet sizes.
Thanks in advance.
Edit:
Here is a fiddle. If you make the browser smaller you will see space beneath the footer http://jsfiddle.net/4RvWY/14/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<aside class="socialfade"> <img class="move" src="images/deviant.png">
<img class="move" src="images/yt.png"/>
<img class="move" src="images/fb.png"/>
</aside>
<!--close socialfade!-->
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<aside class="logofade">
<img src="images/logo.png" />
</aside>
<!--close logofade-->
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<aside class="menufade">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</aside>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="infotxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">lukerbab#gmail.com</p>
</div>
<!--close contact!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
#charset"utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
margin:0 auto;
background:#171717;
font-family:'Roboto', sans-serif;
color:#CCC;
}
a {
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper {
position:relative;
width:100%;
}
/*---------------------------- Header ----------------------------*/
.header {
position:relative;
min-height:180px;
height: 100%;
padding-right:225px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-moz-box-shadow: 0px 10px 20px 0px #333;
-webkit-box-shadow: 0px 10px 20px 0px #333;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.logo {
position: absolute;
min-width:60px;
top:4%;
}
.logo img {
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social {
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img {
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu {
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li {
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a {
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt {
width:100%;
text-align: center;
background:#070707;
font-family:'Roboto', sans-serif;
padding:15px 0;
font-size:0.7em;
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Logo Fader ----------------------------*/
.logofade {
animation: logofadein 3s;
-moz-animation: logofadein 3s;
/* Firefox */
-webkit-animation: logofadein 3s;
/* Safari and Chrome */
-o-animation: logofadein 3s;
/* Opera */
}
}
#keyframes logofadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes logofadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes logofadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes logofadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- menu Fader ----------------------------*/
.menufade {
opacity:0;
animation: menufadein forwards 3s 1s;
;
-moz-animation: menufadein forwards 3s 1s;
/* Firefox */
-webkit-animation: menufadein forwards 3s 1s;
/* Safari and Chrome */
-o-animation: menufadein forwards 3s 1s;
/* Opera */
}
}
#keyframes menufadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes menufadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes menufadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes menufadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- social Fader ----------------------------*/
.socialfade {
opacity:0;
animation: socialfadein forwards 3s 0.5s;
;
-moz-animation: socialfadein forwards 3s 0.5s;
/* Firefox */
-webkit-animation: socialfadein forwards 3s 0.5s;
/* Safari and Chrome */
-o-animation: socialfadein forwards 3s 0.5s;
/* Opera */
}
}
#keyframes socialfadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes socialfadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes socialfadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes socialfadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
#charset"utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt {
margin-top:130px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap {
margin-top:100px;
width:100%;
text-align: center;
/* center align .contacts */
}
/* clearfix */
.detailwrap:after {
content:"";
display: table;
clear: both;
}
.infotxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:2em;
font-weight:400;
}
.contact {
display: inline-block;
/* make it possible to use text-align */
width: 15%;
min-width: 180px;
/* avoid 15% being making the contacts less than 115px */
margin: 4% 1% 10% 0;
}
.contact img {
width: 90px;
display: block;
margin: 0 auto;
max-width: 100%;
/*bring back if needed*/
height: auto;
/*bring back if needed*/
}
.contact .text {
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2 {
position:absolute;
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s;
/* Firefox */
-webkit-animation: fadein 5s;
/* Safari and Chrome */
-o-animation: fadein 5s;
/* Opera */
transition: opacity 5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}

Here is the CSS table layout solution. Just add the below style into your stylesheet.
In table layout, by default table row/rows will auto expand to maximum height available of the entire table. And if we set all the containers to height:100%, that allows the bottom row to be always stay at the bottom of the page.
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.headerwrap, .toptxt, .detailwrap, .footerwrap2 {
display: table-row;
}
.detailwrap {
height: 100%; /*push other rows to their minimal height*/
}
Note, must remove .footerwrap2{position:absolute;} and relevant styles.
Updated - http://jsfiddle.net/4RvWY/17/

CSS should be sufficient here. Did you try position: absolute; bottom: 0px? (Dont forget to set position: relative; on parent element

The window.innerHeight property gives the available window height. That is, the space top to bottom, minus toolbars etc.
Then use element.style.top = innerHeight value to set the div to the appropriate position. Minus an amount from the innerHeight value to give some space from the bottom of the window.

If I've got your idea right this should help:
HTML
<div class="wrapper">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
width: 300px;
margin: 0 auto;
}
.content {
display: table-row;
height: 100%;
background-color: yellow;
}
.footer {
height: 50px;
background-color: red;
}
.header {
height: 50px;
background-color: lightblue;
}
JSFiddle - try to resize window.