粘连布局

最新推荐文章于 2021-04-09 20:10:49 发布
最新推荐文章于 2021-04-09 20:10:49 发布
阅读量251 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LWYYYYYY/article/details/103343830
版权

　粘连布局，又称为stick footer布局。在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

 

0，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        #wrap{
            width: 100%;
            min-height: 100%;
        }
        #main{
            background: yellowgreen;
            padding-bottom: 30px;
        }
        #footer{
            width: 100%;
            height: 30px;
            background: deeppink;
            margin-top: -30px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="main">
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
        main<br>
    </div>
</div>
<div id="footer">底部</div>
</body>
</html>

 

1.绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    html,body{height:100%}
    body{margin:0}
    .box{position:relative;background-color:lightblue;min-height:100%;}
    .content{padding-bottom:50px;}
    .sticky{position:absolute;background-color:deepskyblue;width:100%;height:50px;bottom:0;}
  </style>
</head>
<body>
<div class="box">
  <main class="content">
    决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
决定是否囧分级基金撒附件撒娇覅偶就阿尔法就案件佛i金额哦附件
   ...
  </main>
  <footer class="sticky">
    看到都能看到可能的困难都能
  </footer>
</div>
</body>
</html>

2，calc

上面的代码中，因为要实现最小高度100%的效果，给html、body都设置为高度100%，不利于代码扩展。下面使用100vh来代替100%，代码会简洁很多。内容部分(.content)设置最小高度为calc(100vh - 50px)即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{margin:0}
    .content{background-color:lightblue;min-height: calc(100vh - 50px)}
    .sticky{background-color:lightgreen;height:50px;}
  </style>
</head>
<body>
<div class="box">
  <main class="content">
    Lorem ipsum dolor sit amet consectetur, adi
    pisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...
    Lorem ipsum dolor sit amet consectetur, adi
    pisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急





  </main>
  <footer class="sticky"></footer>
</div>
</body>
</html>

 

3，flex

上面的代码中，如果sticky的底部高度发生了变化，则内容部分的代码也需要进行相应地调整。如果使用flex，则可以更加灵活。为父级(.box)设置flex、上下排列及最小高度为100vh，为内容部分(.content)设置flex:1即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{margin:0}
    .box{display:flex;flex-flow:column;min-height:100vh;background-color:lightblue;}
    .content{flex:1;}
    .sticky{background-color:lightgreen;height:50px;}
  </style>
</head>
<body>
<div class="box">
  <main class="content">
    调度Lorem ipsum dolor sit amet consectetur, adi
    pisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...
    Lorem ipsum dolor sit amet consectetur, adi
    pisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急





  </main>
  <footer class="sticky"></footer>
</div>
</body>
</html>

4，grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{margin:0}
    .box{display:grid;grid-template-rows:1fr 50px;min-height:100vh;}
    .content{background-color:lightblue;}
    .sticky{background-color:lightgreen;}
  </style>
</head>
<body>
<div class="box">
  <main class="content">
    调度Lvv差分方程orem ipsum dolor sit amet consectetur, adi
    pisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...
    Lorem ipsum dolor sit amet consectetur, adi
    pisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急
    ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急 ...覅覅斤斤计较斤斤计较急急急急急急急急急
    发窘我就急急急急急急急急急急急急急急急





  </main>
  <footer class="sticky"></footer>
</div>
</body>
</html>

 

 

李不烦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS2.1利用定位、浮动实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等
05-02
适合前端新手小白的布局方面小技巧，内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等，解决浮动元素高度失效和相邻垂直外边距重叠问题，同时还解决ie6下fixed失效问题。
css经典布局系列四——粘连（css sticky footer）布局
weixin_34186931的博客
04-21 571
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 三个组成部分：wrap容器,main内容,footer脚部 方法一：...
粘连式布局
weixin_44552543的博客
06-08 202
<!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...
粘连字符的图片验证码
04-15
着重于有粘连字符的猫扑和西祠胡同网站验证码进行识别，难点在于分割图片中的粘连字符。对字符是模糊粘连的猫扑验 证码，提出了基于局部极小值和最小投影值的方法来分割；对有交错粘连的西祠胡同验证码，通过颜色...
继电器粘连检测电路设计分析.docx
03-26
继电器粘连检测电路设计分析.docx
淘宝的粘连验证码识别
06-22
基于淘宝的4位和6位粘连验证码的卷积模型识别，字符切割用了CFS连通域和滴水法
Seg.rar_matlab 粘连_粘连字符
09-20
判断是单字符还是粘连字符，然后保存这些字符
论文研究-一种粘连细胞分割的新方法 .pdf
08-16
一种粘连细胞分割的新方法，张佳佳，刘岚，传统的分割方法对于有着复杂背景的淋巴癌医学细胞图像的分割效果很不理想，致使粘连细胞的大量产生。目前对于粘连细胞分割算法也
对“粘连”footer布局的思考和总结
weixin_34355715的博客
12-27 102
经典的"粘连"footer布局 参考文章链接在文章末尾，简单的语言总结如下： 经典的“粘连”footer布局就是。我们有一块内容<main>。当<main>的高度足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。当<main>元素...
前端常见经典布局一：粘连布局
sinat_33255495的博客
11-30 648
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在后面的元素会跟在其后面;示例如下： 当元素比较短的时候（比如小于屏幕的高度），我们期望这个元素能够“粘连”在屏幕的底部。 示例如下： 这种情况我们称为粘连布局。 粘连布局的布局方法 粘连布局由三个组成部分：wrap容器,main内容,footer脚部 <div id="main"> <div class="main"> main<br>
CSS-粘连布局-实现以及变形实战
LYFlied的博客
04-09 1912
文章目录一、粘连布局二、简单实现三、实战-简化DOM结构注意点 一、粘连布局 特点： 有一块内容，当的高康足够长的时候，紧跟在后面的元素会跟在元素的后面滚动。 当元素比较短的时候(比如小于屏幕的高度),我们期望这个元素能够“粘连”在屏幕的底部 如图：图片来源https://blog.csdn.net/VhWfR2u02Q/article/details/84076421 二、简单实现 DOM结构： <body> <div class="wrap">
CSS浮动-5.4实战案例-三列布局-使用双飞翼布局---不理解为啥？？太难了
qq_44280574的博客
08-31 269
1.如何实现一个三列布局 【网页中常用的布局方式，中间是网页的内容主体，两侧是两个边栏，放置一些导航呀，广告呀，新闻呀等等】 实现一个左中右布局 左右两侧宽度固定 中间内容宽度能够自适应 圣杯布局略掌握一个就好~ 2.双飞翼布局！！！ 【很厉害，专门用于解决上边那种布局难题的。 也是大厂面试中经常考察的知识点。】 第一步：使用float属性让左中右三列浮动 第二步：使用负margin属性让左右两列与中间列处于同一水平线上 第三步：在中间列增加一个div内容元素，设置margin值为左右两列的宽度 最后，别忘
css2.1--笔记5（黏连布局和BFC、BFC的练习俩列布局---商品列）
ABU_MOlI_ITUI的博客
08-17 138
粘连布局： 又称作：stickyFooter，经典的“粘连”footer布局：我们有一块内容<main>，当<main>的高度足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。 当<main>元素比较短的时候，（比如小于屏幕的高度，我们期望这个<footer>元素能够“粘连”在屏幕的底部） <!DOCTYPE html> <html> <head&
node（三）buffer 文件 读取 写入
libufan的博客
07-27 6814
一、Buffer - Buffer的结构和数组很像，操作的方法也和数组类似 - 数组中不能存储二进制的文件，而buffer就是专门用来存储二进制数据 - 使用buffer不需要引入模块，直接使用即可 - 在buffer中存储的都是二进制数据，但是在显示时都是以16进制的二位数形式显示 buffer中每一个元素的范围是从00 - ff 0 - 255 00000000 - 1111...
JavaScript（三）语句 循环 if while for
libufan的博客
05-07 1032
1. 语句 在 JavaScript 中，语句使用分号（;）进行分隔。 可以在每行编写一条语句，也可以在每行编写多条语句。 分类: 条件语句: JavaScript 解释器根据一个值判断是执行还是跳过指定语句。 循环语句: JavaScript 解释器根据一个值判断是否重复执行指定语句。 跳转语句: 使 JavaScript 解释器跳转到指定语句。 值得注意的是: - 建议每行编写一...
Express、路由（Router) 、request、response
libufan的博客
08-02 866
一、简介 Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。 Express 简单来说就是运行在Node 平台中的服务器模块，通过Express可以很容易的通过HTTP协议向用户返回静态或动态页面。 Express的特点: 精简、灵活、适合各种WEB应用程序 二、安装express npm ...
零基础CSS教程（一）
libufan的博客
03-17 744
CSS介绍 1.什么是 CSS CSS全称为Cascading Style Sheets，译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。 2.CSS的作用 html是网页的骨架，而CSS就是对骨架内容的修饰； html负责结构，css负责样式，js负责行为 CSS 是能够真正做到⽹页表现与内容分离的⼀一种样式设计语⾔言。相对于传...
使用grid-template-columns布局时，进行缩放后粘连
最新发布
08-12
如果在使用 `grid-template-columns` 布局时，缩放页面后出现了列之间粘连的问题，可能是由于设置了固定的列宽度或者没有足够的空间来容纳所有列导致的。 为了解决这个问题，可以尝试以下几种方法： 1. 使用相对单位：使用相对单位（如百分比）来定义列宽度，而不是使用固定的像素单位。这样，当页面缩放时，列的宽度会根据可用空间的变化进行适应，避免了粘连的问题。 ```css .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } ``` 这个例子将容器分为三个等宽的列，无论页面的宽度如何变化，每个列都会根据可用空间进行自适应。 2. 使用 minmax() 函数：通过使用 `minmax()` 函数设置列的最小和最大宽度，可以确保在缩放页面时列不会过于收缩或扩展。 ```css .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } ``` 这个例子将创建一个自适应的网格布局，每个列的最小宽度为 200px，最大宽度为可用空间的 1fr。这样，当页面缩放时，列的宽度会自动调整以适应新的可用空间，避免了粘连的问题。 3. 使用媒体查询：使用媒体查询来根据不同的屏幕尺寸或视口宽度，为不同的布局情况设置不同的列宽度。这样可以根据具体情况灵活调整列的宽度，避免列之间粘连的问题。 ```css .grid-container { display: grid; grid-template-columns: 1fr 1fr; } @media screen and (max-width: 600px) { .grid-container { grid-template-columns: 1fr; } } ``` 这个例子将在较小的屏幕尺寸下，将布局改为单列显示，以避免列之间粘连的问题。 希望这些方法能帮助你解决列在缩放时粘连的问题！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值