[英]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.