我試圖讓我的頁腳使用它粘在頁面底部，margin-top: auto;但它沒有任何效果。
我認為這可能是因為父級沒有設定高度，但是在設定時height: 100vh它只會縮小頁腳：https ://i.imgur.com/FBXpT7U.png
我不知道為什么這不起作用。
HTML：
<body>
<div class="footer">
<p>Text here</p>
</div>
</body>
CSS：
body {
display: flex;
flex-direction: column;
flex: 1;
}
.footer {
background-color: #1F2937;
color: white;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
margin-top: auto;
}
我正在完成一個關于“奧丁專案”的專案。這是完整的代碼：codepen
uj5u.com熱心網友回復：
在您的 CodePen 中，頁腳下方的空白被padding: 700pxon占據.testimonial-text。洗掉它（或將其降低到合理的值）可以解決問題。
uj5u.com熱心網友回復：
您需要設定max-width而不是使用padding:700px來獲得所需的樣式！
.testimonial-text {
/* padding:700px; */
max-width:500px;
...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/468489.html
下一篇：為什么我的提交按鈕拒絕提交？