HTML footer hidden from ScrollBar

I am trying to create a footer on my page that stays anchored at the bottom of the page as the user scrolls up and down. I am most of the way, but there are a couple of problems that I describe below.

I have a JSFiddle at: https://jsfiddle.net/ay2y73co/

Here is the code I'm using for the footer:

<!-- This fake paragraph only exists to put some space above the footer
     so that page content is not hidden by the footer. -->
<p style="height:3.5em;margin:0px;">&nbsp;</p>

<!-- Here is the footer, proper. -->
<div style="position:fixed;bottom: 0px;left:0px;padding:0.5em; height:3.0em;background-color:rgb(200,200,200);margin: 0px;width:100%;font-size:75%;border: 2px inset red">
   <p>I want the right border to show up -- it seems it is clipped by the scrollbar.</p>
</div>

      

The first problem is that the right border of my footer is hidden by the scrollbar, it basically sits behind the scrollbar as you can see from the missing right border.

The second problem isn't really a problem in and of itself, but I don't like the fact that I need to put a "fake paragraph" above the footer to prevent the page content from scrolling behind the footer. It doesn't seem like a clean solution.

+3


source to share


3 answers


In the CSS footer, replace width:100%

withright:0

JsFiddle example

Or save it and add box-sizing:border-box



JsFiddle example

In the original code, the box with 100% width was too wide based on boder and element padding.

+5


source


If you look at this script:

https://jsfiddle.net/ay2y73co/6/

you will see that I added a wrapper around your content, separate from the footer. I added a CSS class footer as well and placed your CSS for this in the provided stylesheet.



html, body {
    width: 100%; height: 100%;
}
body {
    margin: 0;
    padding: 0 0 5.25em;
    overflow: hidden;
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.content {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}
div.footer {
    position:fixed;
    bottom: 0px;
    left:0px;
    padding:0.5em;
    height:6.0em;
    background-color:rgb(200,200,200);
    margin: 0px;
    width:100%;
    font-size:75%;
    border: 1px inset red
}

      

What you can do to fix your problem is apply bottom padding to body or other tag that is the parent of the content. The padding should be equal to the height of the footer so that the scroll bar does not exceed the full body height.

+1


source


Add this to your footer:

.footer {
    -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
  }
      

Run codeHide result


The border adds to the overall width of your div, so if you set the footer width to 100% and put a 1px border in it, the width will be 100% + 1px left border + 1px right border. box-sizing: border-box

automatically calculates the sum of all margins, paddings and borders of your block element and adjusts them to match the actual specified width.

0


source







All Articles