kyrose/flexboxFooter.css

## flexboxFooter.css
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;

## gridFooter.css
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

## index.html
<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

## notes.md

      
    Raw
  

              notes.md
            
          
    Notes

Flexbox


use flex: 1 on the child you want to grow to fill the space

or

margin-top: auto to push the child away as far as it will go from the neighbor

Grid

Is less widely supported. Should work in Chrome Canary and Firefox Dev.
	html, body {
	height: 100%;
	}

	body {
	display: flex;
	flex-direction: column;
	}

	.content {
	flex: 1 0 auto;
	}

	.footer {
	flex-shrink: 0;
	html {
	height: 100%;
	}

	body {
	min-height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
	}

	.footer {
	grid-row-start: 2;
	grid-row-end: 3;
	}
	<body>
	<div class="content">
	content
	</div>
	<footer class="footer"></footer>
	</body>