4

I have a footer tag on my site which for some reason is out of view, or partly out of view on a nice amount of mobile devices. (I know this through using my browser's developer tools), it can be pulled in to view, but it doesn't stay in view, it gets pulled down again.

The CSS I implemented might be causing this but I need it in order to have the footer stay at the bottom of the page in all cases. (as explained in this question)

This is basically the code for my footer:

html {
  height: 100%;
}

main {
  padding-right: 200px;
  padding-left: 200px;
  background-color: white;
  flex: 1 0;
}

body {
  background-color: #80cbc4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  text-align: center;
  background-color: #d9efef;
  height: auto;
  flex: 0 0;
}
<html>

<body>
  <main>
    page content
  </main>
  <footer>
    <p style="direction:rtl;">
      רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. <a href="http://cs.haifa.ac.il/~shuly/publications/lre4h.pdf">"Language Resources for Hebrew."</a> Language Resources and Evaluation 42(1):75-98,
      March 2008. [<a href="https://yeda.cs.technion.ac.il/files/citations/bibtex/hebrew-resources.txt">BibTeX</a>]
    </p>
  </footer>
</body>

</html>

This problem happens on these devices (as emulated by my browser's developer tools):

  • Pixel 2/2 XL
  • Kindle fire HDX (footer can't even be pulled in to view)
  • iPhone X/6/7/8 Plus
  • iPad/iPad Mini/iPad Pro
  • Surface Duo
  • Blackberry PlayBook
  • Nexus 6/6P/7/10
  • Nokia N9

and not other ones (e.g. desktops), which means that the code above probably doesn't show the problem for other users.

Note: I've been checking all the options in my dev tools, which means I've included in the list above also some uncommon devices.

Also,

Realize that the emulator does not provide the same experience as a person with an actual Pixel 2 XL device would have. They may have the same resolution, but other behaviors may, and probably will, differ. – Heretic Monkey

Which means this might be happening only in my emulator.

This is what the problem looks like:

what the footer looks like

How can I make my footer come back in to view on all devices?

Thunder Coder
  • 104
  • 14
  • Realize that the emulator does not provide the same experience as a person with an actual Pixel 2 XL device would have. They may have the same resolution, but other behaviors may, and probably will, differ. – Heretic Monkey Jun 13 '21 at 22:40
  • See also [100% height on mobile browser using CSS](https://stackoverflow.com/q/29697883/215552) – Heretic Monkey Jun 13 '21 at 22:42
  • Not that I have an answer, but if you don't figure it out I can recommend checking out Kevin Powell's youtube channel. He has a number of excellent videos on how flexbox does *not* work. – Gimby Jun 15 '21 at 13:23

6 Answers6

0

This should help:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

If not, it's probably just out of view. Style the footer to always be in view, yet still at the very bottom:

footer {
     bottom: 0;
     }
Tobias
  • 43
  • 1
  • 8
0

You need to include the footer in the body tag to make it a part of the flexbox and set the min-height of body to 100vh. 100% will be dependent on the content size where as 100vh will be based on the height of the viewport.

I have created a simple codepen for this illustration. Play around with the number of list items or body tag. This should solve your problem

jashgopani
  • 565
  • 7
  • 13
0

You have added padding-right and padding-left of 200px in the styling of <main> tag, due to which the content in <main> is overflowing from <body> while the content of <footer> remains inside the <body>. And due to this, you see additional space on the right side of the footer tag for mobile devices.

I have commented padding-right and padding-left from the main tag and now it is responsive. Also, I would suggest using overflow-x: hidden; in if you don't want your website to scroll horizontally.

html {
    height: 100%;
}

main {
    /* padding-right: 200px;
           padding-left: 200px; */
    background-color: white;
    flex: 1 0;
}

body {
    background-color: #80cbc4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
}

footer {
    text-align: center;
    background-color: #d9efef;
    height: auto;
    flex: 0 0;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
        </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <main>
          page content
        </main>
        <footer>
          <p style="direction:rtl;">
            רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. <a href="http://cs.haifa.ac.il/~shuly/publications/lre4h.pdf">"Language Resources for Hebrew."</a> Language Resources and Evaluation 42(1):75-98,
            March 2008. [<a href="https://yeda.cs.technion.ac.il/files/citations/bibtex/hebrew-resources.txt">BibTeX</a>]
          </p>
        </footer>
      </body>
</html>
Mayank Chaudhary
  • 3
  • 3
  • 1
    The right and left padding are there in order to give the website the look I want on desktops. The problem is with the footer being out of view vertically. – Thunder Coder Jun 30 '21 at 07:39
  • You can add the padding again. I only removed it to make it easier for me to make it and forgot to change it back – The Anonymous Koder Jun 30 '21 at 12:40
  • @ThunderCoder setting padding to 200px makes the site non-responsive because 400px (including left-right padding) +text width (in `
    `) > 360px (width of the Moto G4 emulator), now since the width of the main content is more than the width of the screen you see extra space in the footer, add the child tags or sections in `
    ` such that they become responsive when the screen size is reduced for mobile view. See this example -[link](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query3) mentioned on [link](https://www.w3schools.com/html/html_responsive.asp)
     – Mayank Chaudhary Jun 30 '21 at 18:55
0

html {
  height: 100%;
}

main {
  padding-right: 20px;
  padding-left: 20px;
  background-color: white;
  flex: 1 0;
}

body {
  background-color: #80cbc4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.footer {
  text-align: center;
  background-color: #d9efef;
  height: auto;
  position: sticky;
  bottom: 0;
}
<html>

<body>
  <main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend ex non felis pellentesque, eget faucibus risus fringilla. Integer laoreet nec ante non gravida. Ut efficitur accumsan mauris eu auctor. Aenean odio lectus, commodo ut urna quis, vehicula lacinia orci. Praesent laoreet nisl vel ante faucibus, sit amet dictum dui mattis. Vivamus tincidunt mollis lorem. Vestibulum sed erat sit amet tellus vestibulum convallis. Nunc volutpat urna ac dolor sollicitudin suscipit. Nunc vel nunc eu leo sollicitudin suscipit vitae nec elit. Vestibulum lacinia convallis sem. Mauris sed auctor felis, sit amet imperdiet purus. Phasellus sed dignissim dui. Mauris scelerisque scelerisque neque, eget bibendum mi venenatis sit amet.

Vestibulum nec sapien urna. Aenean aliquam felis nec leo eleifend pulvinar. Vivamus quam dui, dapibus nec sem sed, faucibus fringilla sapien. Ut nisl diam, consequat at ligula sit amet, convallis posuere sapien. Vestibulum bibendum a velit ut congue. Nam ac porttitor dolor. Fusce sagittis pellentesque odio, eu dignissim nunc posuere eget. Praesent ac sem eget dui lacinia aliquam. Praesent sem lectus, gravida sit amet lorem sit amet, malesuada condimentum nisi. Nam lacinia egestas mauris sed tincidunt. Vestibulum eget ipsum ut turpis rutrum sodales. Etiam hendrerit vestibulum tincidunt. In tempus at massa maximus dictum. Vivamus sollicitudin sit amet lorem in viverra. In quis ante vitae lectus aliquet elementum.

Duis blandit mauris ut ipsum feugiat, id tincidunt est consequat. Maecenas fermentum, mauris nec scelerisque pellentesque, eros ante elementum eros, et rhoncus erat augue nec urna. Vestibulum et lorem ligula. Cras nec laoreet erat. Mauris quis elementum ligula, nec pellentesque ipsum. Cras porttitor lorem odio, ac bibendum lectus dictum et. Sed imperdiet lacus arcu, nec egestas libero elementum in. Nulla aliquam accumsan dui at dignissim. Cras mattis vel quam nec condimentum. Duis at nisl dui. Proin sagittis finibus libero. Mauris posuere erat non ante rutrum varius. Vestibulum id nisl finibus, imperdiet libero sed, ornare felis. Mauris maximus, dui ac rutrum blandit, erat nisi lacinia massa, eget fermentum enim enim in est. Suspendisse vehicula lectus at mauris interdum sollicitudin.

Vestibulum tristique diam orci, sed tincidunt velit molestie aliquam. Nullam lobortis lectus eu dolor pretium feugiat. Vestibulum metus ex, euismod et neque in, molestie vestibulum augue. Nulla a lacus eget orci cursus convallis in ac metus. Vestibulum at lectus nec odio lobortis gravida in ut ipsum. Curabitur diam purus, vulputate eget condimentum vitae, molestie ac diam. Donec scelerisque convallis mi, sit amet semper orci scelerisque in.

Vestibulum vel justo sit amet sapien eleifend faucibus eu in mi. Donec rutrum sed sapien vel gravida. Maecenas at sapien euismod, semper tortor ut, vehicula nisl. Maecenas vel tortor vel leo ultricies pellentesque sit amet ac diam. Ut tempor finibus odio at venenatis. Mauris nec leo ac enim pretium aliquet. Phasellus pharetra convallis sem eu convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nulla ligula. Suspendisse et est ac velit consequat tempus. Suspendisse fringilla cursus arcu sed auctor. Donec eget luctus risus, eu luctus libero. Quisque vel tellus in ipsum commodo ultrices. Donec bibendum arcu a maximus luctus.
  </main>
  <div class = 'footer'>
    <p style="direction:rtl;">
      רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. <a href="http://cs.haifa.ac.il/~shuly/publications/lre4h.pdf">"Language Resources for Hebrew."</a> Language Resources and Evaluation 42(1):75-98,
      March 2008. [<a href="https://yeda.cs.technion.ac.il/files/citations/bibtex/hebrew-resources.txt">BibTeX</a>]
    </p>
  </div>
</body>

</html>
The Anonymous Koder
  • 552
  • 3
  • 12
  • This causes exactly what I was trying to avoid when I asked this question: https://stackoverflow.com/questions/67634846/how-can-i-make-footer-stick-to-bottom-of-screen-when-content-is-short-and-to – Thunder Coder Jul 01 '21 at 09:23
0

The height of the box of your body is actually 100vh + (8px * 2) because most browsers define a margin of 8px on body.

You have to remove this margin margin: 0;

If you want to get the same feeling as before you can add: padding: 8px; and box-sizing: border-box;.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Lastly I would advise to use height: 100vh instead of min-height because you want the body itself to take the whole window height. If the height of its content become greater than the body it will be scrollable.

body {
  display: flex;          /* or display: grid */
  flex-direction: column; /* or grid-template-rows: 1fr min-content */
  height: 100vh;          /* css grids are awesome */
  box-sizing: border-box;
  padding: 8px;
  margin: 0;
  background-color: #80cbc4;
}

Edit: After trying it on Edge mobile emulator, I see that there is a scrollbar on x axis which doesn't change the window height, causing it to scroll vertically.

You may want to disable it overflow-x: hidden OR (better solution) make your content width responsive.

devdgehog
  • 575
  • 2
  • 8
  • How do I make my content width responsive? also, the solution you offered doesn't solve the problem of the footer being out of view. – Thunder Coder Jul 01 '21 at 09:30
0

you need to include the attribute of position in the CSS like this...

footer {
  text-align: center;
  background-color: #d9efef;
  height: auto;
  flex: 0 0;
position: fixed 
}
Methuselah Rodger
  • 188
  • 1
  • 5