[英]Using a media query with viewheight to fix footer
我正在尝试使用基本结构(页眉、主体和页脚)创建自己的网站,但是当没有足够的元素来填充屏幕高度时,页脚不会放在底部。
为了解决这个问题,我使用了这些行:
footer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
但是现在有足够的元素并且应该滚动,页脚仍然固定(很明显)所以我试图创建一个媒体查询来更改页脚的 css 当身体的高度大于 100vh - 它不起作用同时我不知道为什么。 我该如何解决?
@media screen and (min-width: 100vh) {
footer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
}
我知道我可以根据最终结构选择其中任何一个,但同时我想忘记必须手动更改页脚的 css。
先感谢您。
我明白你需要做什么,我建议你在容器上使用 flex。
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
如果您使用此结构,请在 styles 下面添加,那么您将永远不需要将 position 固定和媒体查询添加到页脚。
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
要使<body>
垂直填充整个页面:
html {
height: 100% /*of viewport's height*/;
}
body {
/* At least 100%;
* allows vertical scrollbars if content overflows
*/
min-height: 100%;
/* Reset margin:
* Margins don't count towards size.
* If wanted, you'd need to explicitly subtract
* them from size declarations.
*/
margin: 0;
}
要分配<body>
的空间,您可以使用CSS Grid :
body { display: grid; grid-template-rows: auto /*First row: Take up required space*/ 1fr /*Middle row: Take up remaining space, after required space is allotted*/ auto /*Last row: Take up required space*/; } /*Previous rules*/ html {height: 100%} body { margin: 0; min-height: 100%; } /*Ignore; for presentational purposes*/ header, main, footer { min-height: 4rem; } header {background-color: cornflowerblue} main {background-color: brown} footer {background-color: darkkhaki}
<html> <body> <header></header> <main></main> <footer></footer> </body> </html>
只需为整个站点的父元素编写一个属性:
min-height: 100%;
对于页脚之前的部分,您需要注册以下属性:
flex-grow: 1;
'flex' 的默认值为 0 1 auto,这意味着。 弹性增长:0; 伸缩收缩:1; 弹性基础:自动;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.