Preventing fixed footer from overlapping content
I've fixed my footer DIV to the bottom of the viewport as follows:
#Footer
{
position: fixed;
bottom: 0;
}
This works well if there isn't much conte开发者_JS百科nt on the page. However, if the content fills the full height of the page (i.e. the vertical scroll bar is visible) the footer overlaps the content, which I don't wont.
How can I get the footer to stick to the bottom of the viewport, but never overlap the content?
A modern "sticky footer" solution would use flexbox.
tl;dr:: set container (body) to display:flex;flex-direction:column and the child (footer) you want to move down to margin-top:auto.
First, we set the body to "flex" its items vertically, making sure that it is 100% height.
Then we set flex: 0 0 50px on the footer element, which means: "don't grow, don't shrink, and have a height of 50px". We could in fact, omit flex attribute entirely and just go with height:50px.
We can set display:flex on things like the <body> itself somewhat recklessly, because children of a flex container have a implicit value of flex: 0 1 auto (aka flex:initial) if omitted, which is (almost) equivalent to flex:none (which is shorthand for
flex:0 0 auto):
The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.(MDN)
As far as the sticky part, it's the margin-top:auto on the footer that gives us what we want. Applied within a flex container, auto margins take on a new meaning, instead of the usual "get equal amount of free space", they mean "absorb ALL available free space".
From the spec (8.1. Aligning with auto margins):
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Stated more simply:
If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container
Aside: the "normal" flexbox layout approach would probably be to flex a middle section ala <div id="main>...</div> to 100% vertically, which also would make a footer "stick" to the bottom. This approach shows us the flexible box model is, in fact, flexible enough to let us resize/move isolated elements.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
background-color: #efefef;
flex: 0 0 50px;/*or just height:50px;*/
margin-top: auto;
}<p>we've assumed only that there's random space-taking content above the footer...</p>
<p>lorem ipsum dolor flex...</p>
<div>
<p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>The problem is that fixed position takes it out of document flow. You can add margin-bottom to the body content equal to the height of #Footer. This will ensure that there is always an empty space behind the footer equal to its height, preventing it from overlapping the content.
This is another solution which I use using jQuery. To get it set-up, you don't need to code much, and you only need HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Your title</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Your Header</h1>
</div>
<div data-role="main" class="ui-content">
<p style="font-size: 300%;">
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
Some text to enable scrolling...
</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Your Footer</h1>
</div>
</div>
</body>
</html>This is from w3schools - fixed toolbars, but I thought it could be more useful than some other answers.
Try setting your position attribute to static
position: static;
In my case, setting the bottom margin a little bigger than the footer height worked just fine.
<main role="main">
<div class="container" style="margin-bottom: 100px;">
...
</div>
</main>
<footer id="sticky-footer">
...
</footer>
加载中,请稍侯......
精彩评论