sticky-footer布局

1、在网页设计中，存在一个相当古老又常见的问题，他是前端工程师绕不开的坎。可简单描述如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

2、解决方案：将内容区包裹在一个容器里，页脚高度固定

html:
css:
效果展示图：
内容少时：页脚块固定在底部
内容多时：页脚块自动向下，且不覆盖内容

3、解决方案2

<div class="wrapper"><header><h1>头部</h1></header><main>内容</main>
</div>
<footer>底部</footer>
footer{height: 7em;
}
.wrapper{min-height: calc(100vh - 7em);
}当内容少时，footer在底部，当内容多时，footer被内容往下顶
复制代码

转载于:https://juejin.im/post/5abd06b7f265da238155b923

sticky-footer布局相关推荐

html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...
sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延
sticky布局在pc端和移动端都有很大的需求,下面列举一下常用并亲测的几种方法. 1.flex布局方式实现 <!DOCTYPE html> <html lang="en& ...
css宽高自适应布局，实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
CSS绝对底部布局 Sticky footer
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内 ...
css sticky footer实现,css sticky footer经典布局
什么是sticky footer布局? 一般指手机页面中,当内容高度撑不满一屏时,页脚紧贴屏幕底部:当内容高度超过一屏时,页脚紧随其后. 方法一:flex弹性盒子布局父容器container的dis ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
css中底部sticky footer
Sticky footers设计是最古老和最常见的效果之一,它可以概括如下: 1 如果页面内容不够长的时候,页脚块粘贴在视窗底部: 2 如果内容足够长时,页脚块会被内容向下推送. 出现问题如图: 方法 ...
8个有用的 CSS 技巧:视差图像，sticky footer 等等
译者:前端小智原文:https://medium.com/@bretcameron/parallax-images-sticky-footers-and-more-8-useful-css-tric ...
vue动画效果配置和弹层css sticky footer
vue动画效果配置有两种方式: 一种是css方式需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
对“粘连”footer布局的思考和总结
经典的"粘连"footer布局参考文章链接在文章末尾,简单的语言总结如下: 经典的"粘连"footer布局就是.我们有一块内容<main>.当&l ...

sticky-footer布局

sticky-footer布局相关推荐

最新文章

热门文章