粘性页脚直到文档高度大于视图端口
编辑
在测试上述问题的答案之前，我错误地将其标记为重复。它没有提供我想要的东西，它最初是一个粘性的页脚，只有当内容大于viewport时才浮到页面的底部。
/EDIT
EDIT2
在这里上找到答案，纯CSS，做我想做的事情。
/EDIT2
我想要一个粘性的页脚，直到文档的高度大于视图的高度，然后它就应该在文档的末尾。
这份文件是这样建立的：
<body>
<div class="header">
<!-- content -->
</div>
<div class="page-content">
<!-- content -->
</div>
<div class="footer">
<!-- content -->
</div>
</body>.header的高度为101px，.footer的高度为173px。
.page-content的高度取决于内容。
我想让.footer坚持到viewport的底部，只要.page-content没有包含足够的内容使document比viewport有更高的高度
我试着给.page-content一个min-hieght，所以它总是溢出视图，但这实在是太丑了。
这可能是纯CSS还是Javascript/JQuery来这里玩？
回答 4
Stack Overflow用户
发布于 2015-07-02 13:25:34
可以使用的两种相对较新的方法是使用calc和flexbox。两者都有不错的支持( 90%以上没有卡尔克前缀和挠曲箱前缀)。使用它们非常简单，特别是与一些旧的(当然也是更受支持的)方法相比。如果您真的想推动支持，那么视口单元可以使它们更加简单。
方法一- Calc：
CSS：
/* Only needed if not using vh in main */
html, body {
height: 100%;
}
header {
/* Needs to be static */
height: 70px;
}
footer {
/* Needs to be static */
height: 30px;
}
main {
/* Can use 100vh instead of 100% */
min-height: calc(100% - 70px - 30px);
}HTML：
<header></header>
<main></main>
<footer></footer>演示：码页
方法二- Flexbox：
CSS：
body {
display: flex;
flex-direction: column;
/* If using percent then html needs a height of 100% */
min-height: 100vh;
}
main {
flex: 1;
}HTML：
<header></header>
<main></main>
<footer></footer>演示：码页
柔性盒版本是很好的，因为页眉和页脚可以是流动的。main中的flex: 1;确保main将填补页眉和页脚所需的任何剩余空间。Calc的版本不那么强大，需要一个静态的页眉和页脚，但是没有前缀。它们对我来说都很好，无论是自动修复还是无前缀都可以确保我不用担心前缀。
Stack Overflow用户
发布于 2015-07-02 09:03:09
您可能在寻找类似Ryan Faits "HTML 5粘性页脚“之类的东西。
CSS：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}HTML：
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Footer Content here</p>
</div>
</body>
</html>在本例中，页脚将是4em高。您可能希望通过修改“.wrapper”和“页脚”“高度”的“边距”来调整这一点以满足您的要求。
Stack Overflow用户
发布于 2015-07-02 09:01:22
您可以使用这个css到您的页脚，使它在视图的底部。
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 173px;
}https://stackoverflow.com/questions/31179944
复制相似问题
腾讯云开发者
