fixed footer

html, css, flex

by Oleh Kotsubko

HTML

<header class="header">Header</header>
<main class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque.

<img src="http://via.placeholder.com/350x150" alt="" align="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque


<img src="http://via.placeholder.com/350x150" alt="" align="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam id suscipit delectus saepe ratione minima, aliquam natus, impedit ullam, voluptatum, dolor facere quos magni dolorem sequi vero tenetur a itaque


</main>
<footer class="footer">Footer</footer>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  color: #000;
  position: relative;
  font-family: sans-serif;
  font-size: 14px;
}

.header {
  background: pink;
}

.footer {
  background: silver;
}

.header, .footer {
  padding: 20px;
  -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}

.content {
   -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
}

img[align="left"] {
  margin: 15px 15px 15px 0;
}

img[align="right"] {
  margin: 15px 0 15px 15px;
}