有没有一种方法可以在不使用position:fixed属性的情况下将页脚边框固定在屏幕底部(viewpor)?我之所以这样问,是因为在野生动物园中固定定位会带来一些麻烦,我想知道是否可以用其他方式做到这一点。
以防万一:即使页面向下滚动,我也希望页脚停留在VIEWPORT(不是页面)的底部。
谢谢。
答案 0 :(得分:-1)
我将亲自查看CSS Grid,例如:
html,
body {
width: 100%;
height: 100%;
}
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
<html>
<body>
<article>
<header>Header goes here
</header>
<main>Main content goes here
</main>
<footer>Footer goes here
</footer>
</article>
</body>
</html>
Flexbox也是一个选项,例如:
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 100px;
background-color: blue;
}
main {
flex: 1 0 auto;
}
footer {
height: 20px;
background-color: blue;
}
<div class="container">
<header>Header goes here</header>
<main class="content">Main content goes here</main>
<footer>Footer goes here</footer>
</div>