css经典布局系列四——粘连（css sticky footer）布局

最新推荐文章于 2023-05-22 20:25:33 发布
最新推荐文章于 2023-05-22 20:25:33 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： css基础知识点 文章标签： css布局 css sticky footer 粘连布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mutouafangzi/article/details/89431710
版权

文章目录

什么是粘连布局（css sticky footer）

  • 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面;

  • 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。
    粘连布局

  • 三个组成部分：wrap容器,main内容,footer脚部

方法一：footer 上用负的 margin-top

  • 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom。是为了防止负 margin 导致 footer 覆盖任何实际内容。
//html结构
<body>
<div id="wrap">
	<div id="main">
		main<br/>
		main<br/>
	</div>
</div>
<div id="footer"></div>
</body>

//css样式
html, body {
  height: 100%;
  margin: 0;
}
#wrap{
	width: 100%;
    min-height: 100%;
最低0.47元/天 解锁文章
木头房子的格子铺
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-粘连布局-实现以及变形实战
LYFlied的博客
04-09 1926
文章目录一、粘连布局二、简单实现三、实战-简化DOM结构注意点 一、粘连布局 特点： 有一块内容，当的高康足够长的时候，紧跟在后面的元素会跟在元素的后面滚动。 当元素比较短的时候(比如小于屏幕的高度),我们期望这个元素能够“粘连”在屏幕的底部 如图：图片来源https://blog.csdn.net/VhWfR2u02Q/article/details/84076421 二、简单实现 DOM结构： <body> <div class="wrap">
CSS定位（position））之sticky 定位
Serena_tz的博客
02-25 2341
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bo
【CSS 布局】 Sticky Footer布局
我有满天星辰的博客
02-13 859
Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。
CSS实现两个球相交的粘粘效果示例代码
12-14
这是一个纯粹利用CSS所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photoshop里头的几乎一模一样，只是一个用图层和色版来制作，一个则是用CSS（把div当成图层思考就好了）。 从PhotoShop开始 一开始我们来玩Photoshop，会比直接写CSS来得容易理解（没有Photoshop的人也没关系，看完说明也就懂了），首先我们新增两个图层，一个里头放上红色的小球，另外一个里头放上黑色的大球。 接着我们使用高斯模糊的滤镜，分别把小红球和大黑球模糊。 再来我们新增一个“亮度与对比”的调整图层，勾选使用旧版，然后把对比数值往上拉，你就会看到神奇的现象。 拉到边缘不再模
css 粘性布局
热门推荐
Novice-XiaoSong的博客
10-31 1万+
一、粘性布局 position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局 二、坑 粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效 （1）必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛） （2）父元素中不能设置 overflow: hidden 或 overf
25.css经典布局—粘连（css sticky footer）布局
weixin_47254130的博客
06-30 398
1.什么是粘连布局（css sticky footer） 1.当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 2.当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 3.三个组成部分：wrap容器,main内容,footer脚部 方法一：footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padd
详解CSS经典布局之Sticky footer布局
01-21
何为Sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当...
css sticky footer经典布局的实现
11-21
什么是sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。...
CSS使用position:sticky 实现粘性布局的方法
12-14
前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇– position属性讲解》 一般都知道下面几个常用的： { position: static; position: relative; position: absolute; position: fixed; } 在...
CSS2.1利用定位、浮动实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等
05-02
适合前端新手小白的布局方面小技巧，内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等，解决浮动元素高度失效和相邻垂直外边距重叠问题，同时还解决ie6下fixed失效问题。
粘性布局 以及粘性布局失效问题
paidaboluo的博客
07-27 2800
粘性布局 以及粘性布局失效问题
用CSS如何实现两个球相交的粘粘动画效果
web前端开发
10-19 402
来源 | https://juejin.im/post/6844903843294085134这是一个纯粹利用CSS所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photo...
粘连式布局
weixin_44552543的博客
06-08 207
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <titl...
position:sticky-粘性吸附布局
qq_15509267的博客
05-22 854
position:sticky-粘性吸附布局，就是在一个容器里,将一个子元素设置为在元素显示在,显示的效果与一致，当元素被滑动出是,显示效果与一致。
css特效——融合粘滞（炫酷的分享按钮）
朝阳39的博客
11-03 376
完整范例代码和效果见 https://demo.cssworld.cn/new/11/1-6.php 实现原理 SVG滤镜 使用方法 在页面任意位置放入下面这段SVG代码 <svg width="0" height="0" style="position:absolute;"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="1.
ccs简单实现粘连布局功能
weixin_40081575的博客
08-17 176
css部分 html代码 我是内容 我是底部
css实现粘性布局
竹叶轻拂水
09-23 1172
使用css实现粘性布局，需要满足三个条件： 1、需要粘性布局的盒子，必须是父元素的直接子元素 2、父元素要有固定的高度 3、需要粘性布局的盒子使用position: sticky;属性，如果需要走到一定高度就固定的话，可以使用top属性 ...
CSS Sticky footer完美底部布局
景洪的博客
08-01 4363
html结构：<div class="container"> <div class="content-wrapper> <div class="content">内容区域，可随机长度</div> </div> <div class="close"> <div> <div class ="close">关闭图标</div>始终再底部.css代码：.containe
CSS快速入门关键字整理文档
最新发布
04-10
CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等衍生技术）文档样式的计算机语言。以下是一些CSS快速入门的关键字及其简要描述： 选择器（Selector）：用于选择你想要样式化的HTML元素。例如，p 选择所有的段落，.classname 选择所有带有特定类名的元素。 属性（Property）：描述你想要改变的样式特性。例如，color、font-size、margin 等。 值（Value）：为属性设置的具体样式。例如，red、16px、10px 等。 盒模型（Box Model）：CSS布局的基础，每个HTML元素都可以看作是由内容、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。 流（Flow）：在CSS中，元素可以处于不同的布局流中，如普通流、浮动流或定位流。 浮动（Float）：使元素向左或向右移动，其他内容则围绕它。常用于文本环绕图像。 定位（Position）：允许你精确地控制元素在页面上的位置。有static、relative、absolute、fixed 和 sticky 五种定位方式。 Flexbo

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值