解决将footer固定在页面底部的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="main"></div>
<footer></footer>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#main {
height: calc(100vh - 70px);
}
footer {
height: 70px;
background: #000;
}
100vh占据100%可视窗口，利用calc计算，将底部的高度减掉， 保留底部的空间， 这样就可以让底部固定在页面底部了。（注意:calc + - 需要在左右两边都使用空格）
解决将footer固定在页面底部的问题 在线预览 100vh占据100%可视窗口，利用calc计算，将底部的高度减...
当页面内容过少时，页脚会跟随内容，不会紧贴在页面底部。如图： 使用CSS计算属性calc为内容部分设置一个基于视口...
需要处理一种布局当页面内容不足时， 页脚紧贴屏幕底部；当页面内容过长时，页脚紧贴内容后面。 container {...
在一般的页面中，footer应该是置于内容底部，如果内容高度不足，也应该让footer紧贴底部 demo 使用fl...
当你面临这样的问题：有一个具有块级样式的页脚（比如它设置了背景或阴影），当页面内容足够长时它一切正常，当页面较短时...
html： 法一： 或者法二：把header和main用一个容器包起来 √ 法三： ps: 这个flex属性 是 ...
有时候需要实现上中下三栏布局，中间内容区域高度自适应，顶部和底部位置固定不变。 已知顶部和底部高度且高度不变 这种...
页脚紧贴页面底部相信我们前端经常要使用，这里自己总结了下各个方法并简单介绍了下原理及注意点，大家可根据各优缺点进行...
什么是sticky footer布局？一般指手机页面中，当内容高度撑不满一屏时，页脚紧贴屏幕底部；当内容高度超过一...
紧贴浏览器底部 * { padding: 0; margin: 0; } html { _overflow: au...
本文标题：41 紧贴底部的页面
本文链接：https://www.haomeiwen.com/subject/zeycyttx.html
网友评论