我正在尝试使用这个粘性页脚:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
但它会在宽度小于768像素的情况下破坏渲染。
有没有简单的CSS修复方法可以使其在所有分辨率下都正常工作?
我正在尝试使用这个粘性页脚:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
但它会在宽度小于768像素的情况下破坏渲染。
有没有简单的CSS修复方法可以使其在所有分辨率下都正常工作?
Bootstrap 4 现在默认使用 flexbox,因此您可以更轻松地获得一个粘性(非固定)页脚而无需使用额外的 CSS。您只需确保 body 具有 min-height
...
body {
min-height: 100vh;
}
然后使用flexbox实用类...
<body class="d-flex flex-column">
<nav></nav>
<main class="flex-grow"></main>
</footer></footer>
</body>
width
为100%
。.content
元素:
更新示例
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
@media only screen and (max-width: 768px) {
.content {
width: 100%;
}
}
max-width: 100%
。 - tachyonflux增加垂直高度对我有用
<body class="d-flex flex-column min-vh-100">
<nav>this is text</nav>
<main class="flex-grow-1">this is text</main>
</footer>this is text</footer>
</body>
<body class="d-flex flex-column">
<nav></nav>
<section class="container-fluid flex-grow-1"></section>
<footer></footer>
</body>
flex-grow-1
是正确的,但是 body
样式需要是 min-height: 100vh;
。 - Muhammad Tarique