无论页面高度如何，我如何居中对齐div？
[英]How do I center bottom align a div regardless the height of page?
问题描述
I have a problem with positioning a div to the bottom center.This is how my page looks like: 
将div定位到底部中心时遇到问题。这就是我的页面的样子：
.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. 但每当我滚动页面时，div都会停留在屏幕的底部，而不是页面。
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). 每当我尝试其他任何东西时，在整页上没有内容的页面上，div只会停留在最后一篇文章之下（通常位于中间页面）。
I would really appreciate your help. 我将衷心感谢您的帮助。 Thank you very much! 非常感谢你！
3 个解决方案
解决方案1
0 2016-08-29 13:22:58
3 Types of Footers 3种类型的页脚
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; 页脚代码非常简单，只需给它一个height ， width和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 ;) 如果你想让一个居中的页脚留在视口的底部 ，那就是position: fixed用bottom: 0 position: fixed bottom: 0 - 但你已经在你的代码中得到了那个布局，所以我假设你知道怎么做那个;）
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). 如果您希望基于页面内容高度位于视口底部的居中页脚，则必须计算内容和页脚高度，从视口中减去该页脚并使用JS动态调整页脚的页margin-top （我还在条件检查中添加了以确保在此示例中我们没有在footer中应用负上边距）。
// 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 工作代码集示例： http ：//codepen.io/staypuftman/pen/kXOqxx
解决方案2
0 已采纳 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; 如果你正在考虑的.container为“页”，并希望此div 归类为footer坚持它的底部，那么就使用position:absolute; and bottom:0px; 和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; 还记得设置父元素的位置，在我们的例子中， .container是relative因为position:absolute; only gets activated if the element has a non static - ally position ancestor. 如果该元素具有非唯一被激活static 盟友位置的祖先- 。
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 . 您可以通过实现padding来解决它。
解决方案3
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. 页脚已与所有内容分开，是<body>的子项和<main>和<header>元素的兄弟。 So the 1st level from <body> is: 所以<body>的第一级是：
</header>
</main>
</footer>
The 1st level determines how much of the page you want your layout to occupy. 第一级确定您希望布局占用的页面大小。 Well concentrate on the <main> branch. 好好集中在<main>分支上。 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. 通常，此级别将具有包装器/容器，该包装器/容器具有为滚动超出视口边缘的内容而设置的overflow属性。 The 2nd level is occupied by <article> and <hgroup> . 第二级由<article>和<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. 有一个标记为： content的按钮，用于切换<section>元素的存在。 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. 请记住，如果你使用position ，你最有可能最终使大部分元素都被position 。 It's easier to use relative than absolute , trust me on that. 使用relative不是absolute更容易，相信我。 Refer to this short article if you need to know the differences in position values. 如果您需要了解position值的差异，请参阅这篇简短的文章 。
SNIPPET 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.