我正在使用 React 构建一个 Web 应用程序。我创建了一个 html“沙箱”之类的东西来尝试设计和感觉,这样我就可以轻松地向我的老板展示它的外观和功能。我现在将其移植到我的 React 项目中,但遇到了一个奇怪的问题,我的页脚不粘。
我正在使用 Materialise CSS。然而,即使 html 看起来与我手写的 HTML 完全相同,我也无法让页脚停留在底部。
我已经尝试了我能想到的一切。我添加了内联样式并查看了 Materialise 文档,我发现的任何内容似乎都没有解决问题。
使用 Chrome 我相信我可以明白为什么,但我不知道如何修复它,也不知道为什么它会首先做这种类型的事情。看起来页脚的显示被设置为
block
,而它应该是 flex
。我的 CSS 中有正确的设置,但它们在我的 React 项目中被覆盖,我不知道为什么。下图显示了我的问题。
我不知道这些额外继承的样式从何而来,所以我不知道如何更改它们。
这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link type="text/css" rel="stylesheet" href="style.css">
<title>HTML Version</title>
</head>
<body>
<main>
<div class="container">
<div class="navbar-fi>xed">
<nav class="nav-extended white">
<div class="nav-wrapper white">
<ul>
<li>
<a href="test.html" class="brand-logo"><img src="logo64.png" alt="logo"/></a>
</li>
</ul>
</div>
<div class="nav-wrapper nav-2">
<ul class="right">
<li class="hoverable">
<a role="button" onClick="location.href='test.html';"><i class="material-symbols-outlined grey-text text-darken-1">logout</i></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</main>
<footer class="page-footer white">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="grey-text">Company</h5>
<h6 class="grey-text text-darken-1">Awesome Slogan</h6>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="grey-text">Links</h5>
<ul>
<li><a class="grey-text text-darken-1" href="btuvent.com">Link 1</a></li>
<li><a class="grey-text text-darken-1" href="gellert.com">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright white">
<div class="container ">
<p class="grey-text text-darken-1">© 2024 Company Name</p>
</div>
</div>
</footer>
</body>
</html>
还有我的 React 代码:
import 'materialize-css/dist/css/materialize.min.css';
interface FooterProps { }
function Footer(props: FooterProps) {
return <footer className="page-footer white">
<div className="container">
<div className="row">
<div className="col l6 s12">
<h5 className="grey-text">Company</h5>
<h6 className="grey-text text-darken-1">Awesome Slogan</h6>
</div>
</div>
</div>
<div className="footer-copyright white">
<div className="container ">
<p className="grey-text text-darken-1">© Company Name</p>
</div>
</div>
</footer>
}
export default Footer;
我可以向你保证,我在 React 中也有一个
<header><main><footer>
,所以这不是我面临的问题。为了保持理智,我附上了反应输出的屏幕截图:
React 生成的 HTML
您的
page-footer
具有块式显示并不是这里的问题。
将
div
包裹在页眉、主元素和页脚元素周围,然后按如下方式使用它:
HTML
<div class="app">
<header>Header</header>
<main></main>
<footer class="page-footer">Footer</footer>
</div>
CSS
body{
padding: 0;
margin: 0;
}
.app{
background-color: gray;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-footer{
height: 70px;
background-color: white;
display: block;
margin-top: auto; /* this places the footer at the bottom of the page always*/
font-size: 40px;
text-align: center;
}