CODEWITHSUNDEEP
htmlcssfooterfixed
Tom Baxter
Tom Baxter

Reputation: 2208

HTML Footer is Hidden by 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 there but there are a couple problems which I describe below.

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

Here is the code I am using for my 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 obscured by the scroll bar, basically, it is sitting behind the scrollbar as you can see from the missing right border.

The second problem is not really a problem, per se, but I do not like the fact that I have to put in a "fake paragraph" above the footer simple to prevent page content from being scrolled behind the footer. It does not feel like a clean solution.

Upvotes: 3

Views: 2301

Answers (3)

Angel Angeles III
Angel Angeles III

Reputation: 300

Add this to your footer:

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

The border adds up to the total width of your div so if you set your footer's 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 the margins, paddings and borders of your block element and adjusts them to match the actual specified width.

Upvotes: 0

Pegues
Pegues

Reputation: 1783

If you look at this fiddle:

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

you'll see that I've added a wrapper around your content, separate from the footer. I added a CSS class 'footer' as well, and placed your CSS for that 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 issue is apply bottom padding to the 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 scrollbar will not exceed the full height of the body.

Upvotes: 1

j08691
j08691

Reputation: 207900

In your footer's CSS, replace the width:100% with right:0

jsFiddle example

Or keep it, and add box-sizing:border-box

jsFiddle example

In your original code, the box at 100% width alone was too wide based on the boder and padding of the element.

Upvotes: 5

Related Questions