2

We want to get a footer to appear on each printed page and using position: fixed adds the footer to each page. The only problem is that content on the page can flow under the footer.

Is there a way to prevent printed page content from flowing under a position: fixed footer?

Ole
  • 41,793
  • 59
  • 191
  • 359

3 Answers3

2

body {
  margin: 0;
}
.content {
  padding: 30px;
  font-size: 18px;
  background: #ccc;
  padding-bottom: 60px;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #f89;
}
footer div {
  padding: 20px;
}
.last-content {
  color:red;
}
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus ex odio, in bibendum odio aliquam nec. Phasellus suscipit in mi eget pretium. Etiam pellentesque est ac nunc ullamcorper dapibus. Maecenas viverra tristique erat, ac fringilla est placerat a. In non porta metus. Integer tincidunt mollis quam, ut vestibulum orci tempor eu. Vestibulum rutrum est vitae porta tristique. Fusce dui libero, luctus et leo quis, euismod tincidunt ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ut fringilla felis.

Nulla at erat nulla. Aenean ut elementum sem, sed fringilla neque. Quisque dolor dui, varius eget tempus vitae, scelerisque interdum lectus. Suspendisse ut ante maximus, accumsan urna at, vehicula purus. Aenean auctor justo in viverra varius. In malesuada, turpis egestas aliquet mollis, magna nisi dignissim libero, vitae bibendum elit risus ut eros. Aenean quis metus eget odio egestas ornare. Maecenas malesuada nulla ligula, ut sagittis est finibus eget. Donec nec ullamcorper nunc. Fusce elementum urna et neque aliquet volutpat. Morbi convallis luctus facilisis.

Suspendisse et ipsum nec odio maximus placerat eget in nisi. Vivamus gravida, velit non euismod mollis, nisi lectus sodales leo, et elementum odio elit quis lectus. Ut efficitur vitae neque in malesuada. Nam varius malesuada metus, id lobortis orci ultrices vitae. Duis iaculis libero eu metus feugiat consectetur. Maecenas scelerisque et turpis at ultrices. Morbi vehicula eu dolor eget porttitor. Maecenas leo enim, tempus vel mi ut, eleifend venenatis ante. Proin id aliquam metus. Nullam non lorem ut odio molestie finibus pharetra ullamcorper enim.

Aliquam egestas purus libero, et lacinia nisl semper at. Integer a ornare orci. Pellentesque porta, purus nec consectetur sollicitudin, nunc lectus tincidunt eros, a dictum libero augue et elit. Integer quis ultricies lectus. Nunc eu eros venenatis, euismod mi at, maximus augue. Vestibulum ut aliquam neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque velit ante, id tempus quam auctor nec.

Integer vitae nibh id ipsum ultrices hendrerit. Maecenas tempus arcu enim, aliquam feugiat mauris finibus sit amet. Quisque elementum risus eros, tincidunt suscipit velit fermentum ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec fermentum quam. Integer quis tempus nunc. Curabitur in massa ac lorem pellentesque porta. Phasellus finibus lorem est, at cursus sem imperdiet at. Cras nunc lacus, dictum vitae finibus et, porttitor id nisi. Integer bibendum imperdiet urna, eget sollicitudin erat <span class="last-content">last content</span>
</div>
<footer>
  <div> here is footer block </div>
</footer>

That is how CSS behave when position fixed. You should add margin-bottom for the main block(parallel block before the footer) margin-bottom == footer height

Tharaka Nilupul Dharmabandu
  • 386
  • 3
  • 16
2

.content {
  margin-bottom: 50px;
  /*same height as footer*/
}

.footer {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: yellow;
}
<div class="content">
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p style="color: red">BOTTOM CONTENT</p>
</div>
<div class="footer">
  FOOTER
</div>
Harry
  • 678
  • 10
  • 26
1

Well, it looks like the content is ignoring the block of your footer and being rendered under it somehow.

Maybe you can add display: inline-block; to your CSS so the footer occupies a full line without being surpassed.

deLiz
  • 82
  • 1
  • 9