我有以下結構：
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
我使用 javascript 動態載入
我希望
P粉3443557152024-01-22 14:23:30
Ryan Fait 的黏性頁腳是一個簡單的解決方案，我過去曾多次使用過。
基本 HTML：
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
將其翻譯為類似於您已經得到的結果，大致如下：
HTML：
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
只是不要忘記更新包裝邊距上的負數以匹配頁腳和推送 div 的高度。祝你好運！
P粉9707363842024-01-22 10:09:20
Ryan Fait 的黏性頁腳 是非常好，但是我發現它缺乏基本結構*。
如果您夠幸運，可以使用 Flexbox 而無需支援舊版瀏覽器，那麼黏性頁腳就會變得非常簡單，並且支援動態調整大小的頁尾。
使用 Flexbox 讓頁腳黏在底部的技巧是讓同一容器中的其他元素垂直彎曲。它所需要的只是一個帶有 display: flex 的全高包裝元素和至少一個 flex 值大於 0 的同級元素：
<子>CSS：
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>