首先，我在 StackOverflow 上查找了解決此問題的不同方法，但沒有一個建議的答案對我有用。我正在使用引導程式 4.6.0，試圖將頁腳設定在底部，但我面臨的問題是，在調整螢屏大小時，頁腳位于正文內容的頂部。試圖使用固定底類。還嘗試將主體位置設定為相對位置并將其設定min-height為 100%，然后將頁腳的位置設定為絕對位置，但這也不起作用，我使用了 ASP.NET MVC，我將分享我使用的完整代碼供您查看。
.main-login-container {
padding-top:40px;
position:relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 70%;
min-height: 70vh;
}
body {
height: 100%;
}
html * {
box-sizing: border-box !important;
}
html {
height: 100%;
box-sizing: border-box !important;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.footer{
position: absolute;
bottom: 0;
background-color: #16a085;
width:100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="container body-content" >
<div class="containter">
<div class="form-group">
<label class="control-label">Email:</label>
<input class="form-control" type="email"/>
</div>
<div class="form-group">
<label class="control-label">Password:</label>
<input class="form-control" type="password" />
</div>
</div>
<footer class="footer">
<p style="text-align:center">My ASP.NET Application</p>
</footer>
</div>即使調整瀏覽器大小，如何使頁腳保持在頁面底部？也試過 transform:translateX(80%)但沒有用。
uj5u.com熱心網友回復：
幾周前我也有同樣的問題。這段來自凱文鮑威爾的 7 分鐘視頻很好地描述了它。我也推薦他的頻道。他經常涵蓋很多關于 CSS 的基礎知識。我的觀點是，在依賴庫和框架為你做事之前，最好先學習香草……因為那樣你就不會確切地知道那個庫或框架是如何做到的。
https://www.youtube.com/watch?v=yc2olxLgKLk
這是基于該視頻的 Vanilla HTML / CSS 解決方案。我更改了您 HTML 中的一些元素，以使其更易于閱讀。你可能會有一些想要改變的東西，但這只是為了讓你開始！當然，如果您愿意，將來仍然可以添加引導程式或 JQuery，而不會造成任何破壞。希望能幫助到你！
這是 codepen 鏈接，因此您可以預覽我的解決方案，而不會覆寫您迄今為止所做的任何事情。https://codepen.io/gold240sx/pen/bGaqqrz
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In:</title>
</head>
<body>
<div class="content">
<form class="login-container">
<label>
<p class="label">Email:</p>
<input class="form-input" type="email"/>
</label>
<label>
<p class="label">Password:</p>
<input class="form-input" type="password"/>
</label>
</form>
</div>
<footer>
<p style="text-align:center">My ASP.NET Application</p>
</footer>
</body>
</html>
CSS：
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 16px;
}
.content{
padding-inline: 3rem;
height: fit-content;
margin-top: auto;
}
form {
min-height: fit-content;
align-items: center;
min-width: fit-content;
min-height: fit-content;
position: relative;
margin: auto;
line-height: 30px;
}
.form-input {
width: 100%;
line-height: 30px;
border: 2px solid gray;
border-radius: 5px;
}
input:focus {
outline: none;
background-color: lightgrey;
}
.form-group {
max-width: 600px;
margin-inline: auto;
}
.login-container {
border: 2px solid grey;
border-radius: 25px;
max-width: 600px;
padding: 5px 20px 20px 20px;
justify-content: center;
}
footer{
margin-top: auto;
background-color: #16a085;
padding: 20px;
width: 100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/450776.html
上一篇：關于會話cookie的安全問題