[英]How do I center bottom align a div regardless the height of page?
将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>
但每当我滚动页面时，div都会停留在屏幕的底部，而不是页面。
每当我尝试其他任何东西时，在整页上没有内容的页面上，div只会停留在最后一篇文章之下（通常位于中间页面）。
我将衷心感谢您的帮助。 非常感谢你！
3种类型的页脚
如果您希望中心页脚只悬挂在您提供的内容下方 ，那么这是大多数浏览器布局引擎的默认行为。 页脚代码非常简单，只需给它一个height ， width和margin: 0 auto; 就像你已经完成的那样。
footer {
background-color: #b8ffc9;
height: 100px;
width: 200px;
text-align: center;
margin: 0px auto;
}
如果你想让一个居中的页脚留在视口的底部 ，那就是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;
}
如果您希望基于页面内容高度位于视口底部的居中页脚，则必须计算内容和页脚高度，从视口中减去该页脚并使用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);
工作代码集示例： http ：//codepen.io/staypuftman/pen/kXOqxx
如果你正在考虑的.container为“页”，并希望此div 归类为footer坚持它的底部，那么就使用position:absolute; 和bottom:0px; 为页脚。
还记得设置父元素的位置，在我们的例子中， .container是relative因为position:absolute; 如果该元素具有非唯一被激活static 盟友位置的祖先- 。
另外要记住的一点是，这个“页脚”将重叠父元素的内容。 您可以通过实现padding来解决它。
在下面的代码段中，页脚持久保存在视口的底部，其余部分垂直滚动。 页脚已与所有内容分开，是<body>的子项和<main>和<header>元素的兄弟。 所以<body>的第一级是：
</header>
</main>
</footer>
第一级确定您希望布局占用的页面大小。 好好集中在<main>分支上。 第二级确定内容的显示方式。 通常，此级别将具有包装器/容器，该包装器/容器具有为滚动超出视口边缘的内容而设置的overflow属性。 第二级由<article>和<hgroup>占用。
</hgroup>
</article>
第三级和后面的级别是内容。 有一个标记为： content的按钮，用于切换<section>元素的存在。 这演示了布局如何包含和不包含内容。 请记住，如果你使用position ，你最有可能最终使大部分元素都被position 。 使用relative不是absolute更容易，相信我。 如果您需要了解position值的差异，请参阅这篇简短的文章 。
$('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>
如何在中心垂直对齐两个div并在底部保留一个div？
[英]How do I vertically align two divs at center and keep one div at bottom?
即使内容较少，如何在网页的右下角对齐div？
[英]How do I align a div at the bottom right corner of a web page even if the content is less?
无论屏幕大小如何，我如何将页脚文本置于页面底部
[英]how can i center the footer text in the bottom of the page regardless of screen size
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.