我有一个外部div的页面,包含标题,内容和页脚div.我希望页脚div拥抱浏览器的底部,即使内容div不够高,无法填充可视区域(即没有滚动).
Luk*_*noy 40
使用flexbox可以轻松解决您的问题.只需将.container和.footer包装在一个最小高度为100vh的弹性容器中,将方向切换到列,使它们堆叠在彼此的顶部,并在内容之间用空间对齐,使页脚移动到底部.
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between
}<div class="flex-wrapper">
<div class="container">The content</div>
<div class="footer">The Footer</div>
</div>Jah*_*mic 14
我想要的是只有在内容不足以填满浏览器窗口(非粘性)的情况下才能将页脚放在浏览器视图的底部.
我能够通过使用CSS函数calc()来实现.所有现代浏览器都支持它.你可以使用像:
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
css:
.container
{
min-height: 70%;
min-height: -webkit-calc(100% - 186px);
min-height: -moz-calc(100% - 186px);
min-height: calc(100% - 186px);
}
将186更改为页脚大小.
hah*_*aha 10
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}
body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }<div id="wrapper">
<div id="header">
Header
</div>
<div id="push"></div>
</div>
<div id="bottom">
<div id="footer">
Footer
</div>
</div>我做了Jahmic上面做的事情(不会让我发表评论),除了我不得不使用VH代替%,因为我不能只将它应用于容器类.
#inner-body-wrapper
{
min-height: 70vh;
min-height: -webkit-calc(100vh - 186px);
min-height: -moz-calc(100vh - 186px);
min-height: calc(100vh - 186px);
}
小智 7
您可以使用 Flexbox 完全执行您想要的操作，例如：
html, body {
height: 100%;
width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex-grow: 1;
}
请注意，页脚必须位于内容元素之外
html 结构将类似于以下内容：
<html>
<body>
<div class="wrapper">
<header></header>
<div class="content">
<!-- Content -->
</div>
<footer></footer>
</div>
</body>
</html>
虽然这个问题很老，但我想稍微改进一下Luke Flournoy的精彩回答。
卢克的答案仅在包装中有两个元素时才有效。至少有 3 个是很常见的：页眉、主要内容和页脚。有了这三个元素，Luke 的代码会将它们垂直均匀地间隔开——很可能不是你想要的。对于多个元素，您可以这样做：
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: flex-start;
}
.footer {
margin-top: auto;
}<div class="flex-wrapper">
<div class="header">The header</div>
<div class="content">The content</div>
<div class="footer">The footer</div>
</div>小智 7
我发现这个非常简单的方法，只需在主容器中添加最小高度并使页脚粘起来
body { /* the main container */
min-height: 100vh;
}
footer {
position: sticky;
top: 100%;
}
上面有很好的答案，我认为问题是现在大多数人都想用像 React、Next 或 Vue 这样的框架来做到这一点，这些框架添加另一个元素来包装框架渲染的所有 html，比如带有 id 的 div，所以#root #__next
我们必须将样式应用于该元素
使用带有 flex-grow:1 的空白 div 来填充页脚之前未使用的空间。
<body style="min-height: 100vh; display: flex; flex-direction: column;">
Any content you want,
put it here. Can be wrapped,
nested, whatever.
<div style="flex-grow:1"></div>
<!-- Any content below this will always be at bottom. -->
<footer>Always way at the bottom</footer>
</body>
根据需要将样式提取到 css。这通过将 <body> 设置为 display:flex; 来实现。
| 归档时间： |
|
| 查看次数： |
62084 次 |
| 最近记录： |