How do I center bottom align a div regardless the height of page?
Question
I have a problem with positioning a div to the bottom center.This is how my page looks like:
.fill{ height:auto; min-height:100%; } .container { min-height:80rem; height:auto; background: #c9c8c8; } .parent{ position:fixed; bottom:0px; width:100%; } .child{ width:100px; margin:0px auto; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="fill"> <div class="container"> <div class="parent"> <div class="child">This is footer</div> </div> </div> </div> </body>
but whenever I scroll the page, the div stays at the bottom of the screen, not page.
Whenever I try anything else, on pages that don't have content on full page, the div just stays under the last post (pretty often in the middle od page).
I would really appreciate your help. Thank you very much!
3 answers
solution1
0 2016-08-29 13:22:58
3 Types of Footers
If you want a centered footer that just hangs out below the content you present, that's the default behavior of most browser layout engines. The footer code would be very simple, just give it a height , width and margin: 0 auto; like you've already done.
footer {
background-color: #b8ffc9;
height: 100px;
width: 200px;
text-align: center;
margin: 0px auto;
}
If you want a centered footer to stay at the bottom of the viewport , that's position: fixed with bottom: 0 - but you've already got that layout in your code so I'm assuming you know how to do that one ;)
footer {
background-color: #b8ffc9;
height: 100px;
width: 200px;
text-align: center;
margin: 0px auto;
position: fixed:
bottom: 0;
}
If you want a centered footer that is at the bottom of the viewport based on the height of the page content , you have to calculate the content and footer heights, subtract that from the viewport and adjust the margin-top of the footer dynamically with JS (I also added in a conditional check to make sure we aren't applying a negative top margin to footer in this example).
// 1- Calculate height of window
var windowHeight = window.innerHeight;
// 2- Get height of container and footer
var contHeight = $(".container").height();
var footerHeight = $("footer").height();
// 3- Add height of container and footer, subtract from visible window height. This will be the new margin-top
var footerTopMargin = windowHeight - (contHeight + footerHeight);
// 4- Check to make sure footerTopMargin isn't 0
if (footerTopMargin <= 10) {
footerTopMargin = 10;
}
// 5- Apply caluclated footerTopMargin to footer
$("footer").css("margin-top", footerTopMargin);
Working codepen example: http://codepen.io/staypuftman/pen/kXOqxx
solution2
0 ACCPTED 2016-08-29 13:39:19
If you are considering the .container as "Page" and you want this div classed as footer to stick to the bottom of it, then just use the position:absolute; and bottom:0px; for the footer.
Also remember to set the position of the parent element, .container in our case as relative since the position:absolute; only gets activated if the element has a non static - ally position ancestor.
Also one thing to remember is that this "footer" will be overlapping the content of parent elements. You can workaround it by implementing a padding .
solution3
0 2016-08-29 17:01:35
In the following Snippet, the footer is persistently at the bottom of viewport and the rest of the layout scrolls vertically. The footer has been separated from everything and is the child of <body> and a sibling of the <main> and <header> elements. So the 1st level from <body> is:
</header>
</main>
</footer>
The 1st level determines how much of the page you want your layout to occupy. Well concentrate on the <main> branch. The 2nd level determines how the content is displayed. Typically this level will have the wrapper/container that has overflow properties set for scrolling content that extends beyond the edge of the viewport. The 2nd level is occupied by <article> and <hgroup> .
</hgroup>
</article>
The 3rd level and the levels that follow are content. There is a button labeled: content , which toggles the presence of the <section> elements. This demonstrates how the layout is with and without content. Keep in mind if you use position , you will most likely end up making the majority of your elements position ed as well. It's easier to use relative than absolute , trust me on that. Refer to this short article if you need to know the differences in position values.
SNIPPET
$('button').on('click', function() { $('.child').fadeToggle(); });
html, body { height: 100%; width: 100%; box-sizing: border-box; font: 400 16px/1.428 Verdana; background: #444; color: #ede; position: relative; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0 none transparent; } .main { height: 100vh; width: 100vw; background: #c9c8c8; overflow-y: scroll; overflow-x: hidden; position: relative; padding: 0 1.5em; } .article { min-height: 100vh; margin: 0 auto 15%; position: relative; width: 100%; padding: 1em; background: #e00; } .child { position: relative; width: 100%; margin: 0px auto 1.25em; padding: 2em; } section:last-of-type { margin-bottom: 3em; } .sec1 { background: yellow; color: black; } .sec2 { background: black; color: yellow; } .titles { line-height: 2; padding: 0 1em 2em; } .titles * { margin-bottom: 5px; } h1, h2, h3, h4 { font-variant: small-caps; font-family: Tahoma; } h1 { font-size: 2rem; } .head h1 { display: inline-block; color: white; position: relative; top: calc(50% - 1rem); } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } p { font-size: 1.1rem; } .nav { position: relative; display: table; width: 80%; } a, a:link:link, a:visited:visited { margin: 0 1em; padding: 1em 0; display: table-cell; color: white; font-size: 1.4rem; } a:hover:hover, a:active:active { color: yellow; } .head { font-size: 1.25rem; position: relative; width: 100%; border-bottom: 3px ridge grey; padding: 1em 2em 0; margin: 0 auto 1.25em; background: green; } .foot { display: table; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; border-top: 3px ridge grey; padding: 1em 2em; margin: 1.25em auto 0; height: 2.5em; min-height: 15%; background: blue; color: white; } .btn.btn { background: orange; } .btn.btn:active { color: black; background:yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <body> <header class='head'> <h1>Site Title</h1> <nav class='nav'> <a href='#/'>Link</a><a href='#/'>Link</a><a href='#/'>Link</a> </nav> </header> <main class="main"> <hrgroup class='titles'> <h2>Article Title</h2> <h3>Byline</h3> </hrgroup> <article class='article'> <section class='child sec1'> <h3>Top Section 1</h3> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <h4>End Section 1</h4> </section> <section class='child sec2'> <h3>Top Section 2</h3> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <h4>End Section 2</h4> </section> </article> </main> <footer class="foot"> <h3 style='display:table-cell'>Footer</h3> <button class='btn'>Content</button> </footer> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.