CODEWITHSUNDEEP
htmlcssfooter
yusufhamdan
yusufhamdan

Reputation: 1

Footer is not in the bottom on high resolution

I have a footer with the below HTML and CSS code, when I view the page on my resolution (1366x768), everything looks okay. But when using a higher resolution device (1920x1080), the footer is not fixed to the bottom and is instead above the bottom (near to the middle of page). I used Chrome Zoom and it appears that the footer moves along with all elements in the page. 

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
	background-color: #fff;
	padding: calc(8px * 1.5) 0;
}
</div> <!--/.container-->
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

Is there a way to make the footer appear on the bottom (on all resolutions) and not move with other elements? It feels loose.

Upvotes: 0

Views: 777

Answers (3)

alessandro davoli
alessandro davoli

Reputation: 11

Just give the content element that is before footer a calculated min-height (taking all the elements' fixed height into account). If you post the complete html code it would be easier to help you...

[edit] Example code -> assuming to have a header of 80px height (that isn't contained inside div.content) and a footer of 100px height, you can give the container a min-height equal to viewport height (vh) minus 180px (80px of the header + 100px of the footer):

.header
{
  height:80px;
}

.footer
{
  height:100px;
}

.container
{
  min-height:calc(100vh - 180px); 
}

for a html page code that would look like that:

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

If you want to keep header and footer with no fixed height than just use flex-box (this require a wrapper element, it could be the , too):

.flex-wrapper
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header
{
  // whatever
}

.footer
{
  // whatever
}

.container
{
  flex:1; 
}

this will work with this html structure:

<div class="flex-wrapper">
  <div class="header"></div>
  <div class="container"></div>
  <div class="footer"></div>
</div>

Upvotes: 0

seantunwin
seantunwin

Reputation: 1778

Using flexbox we can easily keep the footer at the bottom by wrapping our content, footer, and optionally a header in a flex container with flex-direction: column; and min-height: 100vh while setting the content to flex-grow: 1. The default for flex-grow is 0 so we don't have do anything with our footer (although I did center it with align-self: center).

I have also added a toggle to show an increased content view as proof that the footer will flow with the content while remaining at the bottom when the content by itself doesn't fill the #content.

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  align-self: center;
}

#content {
  flex-grow: 1;
  padding: 1rem;
  border-bottom: 1px solid grey;
}

.to-bottom {
  margin-top: 110vh;
}
<div id="container">
  <div id="content">
    <label for="toggle-height">Force Scroll: </label><input id="toggle-height" type="checkbox" onclick="document.querySelector('p:nth-of-type(2)').classList.toggle('to-bottom')"/>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
  </div>
  <footer>&copy; My Site</footer>
</div>

Upvotes: 1

Mathias
Mathias

Reputation: 36

Try this:

html, body {margin:0; padding:0}

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
  background-color: #ccc;
  padding: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
}
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

Reference: https://www.w3schools.com/cssref/pr_pos_bottom.asp

Upvotes: 0

Related Questions