我想在页面的最底部留下一个页脚。我有一个包含搜索栏的网页。当用户在搜索栏中键入时，应用程序会获取一些数据，并将其显示在搜索栏正下方的表格中，因此可能需要滚动页面才能看到完整的表格。滚动后，我设法将页脚显示在网页底部的表格末尾；问题是，当第一次加载页面时，搜索栏为空(用户尚未使用(，页脚会显示在表单的正下方(因为没有表(，就像在网页的一半。我不能在"；"力"；这是因为当用户使用表单和表被渲染时，这些填充和边距也会被应用，并且表末尾和页脚之间的空间会太大。
以下是我的一些代码片段：
App.css
html, body, .container
{
height: 100%;
margin: 0;
padding: 0;
}
footer
{
position: sticky;
bottom: 0;
left: 0;
width: 100%;
}
hr
{
color: silver;
}
#recent_matches_table
{
width: 30%;
margin-left: auto;
margin-right: auto;
color: blue;
border: 10000px rounded;
border-color: aqua;
font-family: 'Times New Roman', Times, serif;
}
CustomFooter.js
// (... Some React code ...)
<div className='container'>
<footer>
<hr />
<p className='copyright'>Copyright: giafra , 2022.</p>
<p className='copyright'>Halo is a trademark of a series of video games and books. All rights are reserved to Microsoft and 343 Industries.<br />
The Halo: The Master Chief Collection logo is intellectual property of Microsoft and 343i, as well as the entire Halo related logos.</p>
<p className='copyright'>The API used to fetch the player data is property of HaloDOTApi, and it's intended not to have a commercial use.</p>
</footer>
</div>
// (...)
当不使用搜索栏时会发生这种情况，因为您可以看到页脚呈现在页面中间：
https://ibb.co/6y9bvZb
当搜索栏用数据渲染表时，就会发生这种情况，滚动后，页脚会正确地呈现在表末尾的正下方。
https://ibb.co/cDtK5Mk
如果您将html and body高度设置为100%，并将任何container'smin-height设置为直接子级100%，那么您将获得所需的输出。
由于%总是从parent继承而来。
考虑以下示例：
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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="d-flex">
<div>sum1</div>
<div>sum2</div>
<div>sum3</div>
<div>sum4</div>
<div>sum5</div>
</div>
</header>
<div class="main">
<h2>This is the main content</h2>
<p>lorem50</p>
</div>
<footer>
<p>This is the footer which will always at bottom</p>
<p>© all rights reserved.</p>
</footer>
</body>
</html>
Css文件
html,
body {
height: 100%;
}
header .d-flex {
display: flex;
justify-content: space-between;
align-items: center;
background-color: black;
color: white;
}
div.main {
min-height: 100%;
}
footer {
background-color: #000;
color: white;
}
这里，div.main容器将根据父级继承其高度。
如果你希望它是粘性的，你可以参考以下网站：
第一个网站
第二个网站
只需在main元素中添加一些css，例如：
min-height: 100vh;
试试这个
footer {
background: #140b5c;
width: 100%;
bottom: 0;
left: 0;
position: absolute;
}
footer .content {
max-width: 1250px;
margin: auto;
padding: 30px 40px 40px 40px;
}
footer .content .top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
}