使用flex属性做一个粘性页脚

最新推荐文章于 2024-04-27 21:35:02 发布
最新推荐文章于 2024-04-27 21:35:02 发布
阅读量419 收藏
点赞数
分类专栏： css 文章标签： css 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>粘性页脚测试</title>
  <style>
    .Site {
      display: flex;
      min-height: 90vh;
      flex-direction: column;
    }
    .Site-content {
      flex: 1;
    }
  </style>
</head>


<body class="Site">
  <header>头部</header>
  <main class="Site-content">
  </main>
  <footer>页脚</footer>
</body>
</body>
</html>

鹿目达也
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS使用position:sticky 实现粘性布局的方法
12-14
简介 前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇– position属性讲解》 一般都知道下面几个常用的： { position: static; position: relative; position: absolute; position: fixed; } 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值： /* 全局值 */ position: inherit; position: initial; position: unset; 估计大部分都没有用过position
CSS经典布局——sticky footer粘滞页脚
mxydl2009的博客
04-03 421
简述 sticky footer粘滞页脚布局是经常使用的CSS经典布局之一，其表现形式是：页脚始终在视口的底部，不管是内容区内容较少不足以占据视口高度，还是内容区内容很多超过视口高度导致出现滚动条，页脚都处于视口的底部，并且不会遮住内容。 表现形式 内容区内容不多 内容区内容很多 HTML代码与CSS代码 <!DOCTYPE html> <html lang="en">...
Sticky footers 粘性页脚布局
旅行的风筝
04-21 1398
Stacky footers 可以译为粘性页脚，粘在底部的意思。可以理解为固定页脚，将页脚固定在底部。示意图： 需求：1、在内容未撑满页面时，footer固定在底部 2、在内容超出页面时，footer随着页面的变大而往下移动，也保持在页面底部。实现的思想：     1、header、body、footer都是页面的一部分，page.height = header.height
前端必懂之Sticky Footer(粘性页脚)
切图妞的博客
04-23 1991
Sticky Footer的场景是页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。
详解CSS中的flex容器与flex属性
12-13
flex container（flex容器 或 弹性容器） flex容器是flex元素的的父元素。 通过设置display 属性的值为flex ...flex容器的每一个子元素均为一个flex子元素。注意：felx容器直接包含的文本变为匿名的弹性子元素。 注意：
使用ColdFusion和Flex构建您的第一个数据管理应用程序
02-27
一个用户更新了DataGrid后，所有其他访问该数据的用户可以立即收到这些更新。这意味着您不必再担心竞态条件和数据覆盖问题。对于初级教程来说，这似乎有点复杂，但我认为您一定会对ColdFusion8、FlexBuilder3和...
使用flex布局的前端静态网页.zip
10-21
使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip
css经典布局系列四——粘连（css sticky footer）布局
weixin_34186931的博客
04-21 571
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 三个组成部分：wrap容器,main内容,footer脚部 方法一：...
粘性定位position:sticky用法,手机移动设备：flex布局
xinshiku的博客
11-24 4635
悬浮样式
微信小程序Flex布局用法深入浅出分析
10-17
主要介绍了微信小程序Flex布局用法,深入浅出地罗列分析了flex弹性布局常见的属性、功能及使用方法,需要的朋友可以参考下
sticky footer——粘黏页脚，你知道多少？
Bumphy的博客
05-02 513
一、什么是sticky footer？ 作为一名前端coder，如果有人问你什么是sticky footer时，你一脸懵逼的样子，可是要被鄙视的哟…… 其实，在日常开发中，你一定遇见过这样的布局，只是不知道它的名字罢了。当然，知道这个英文，偶尔也是不错的呢！ sticky footer 指的是在页面布局时，当页面的内容不足或等于一屏时，让页脚始终保持在页面的底部，如同粘在底部一样(^-^)；...
【CSS3】页脚区域粘附问题
季诗筱的博客
04-28 1120
页脚区域粘附问题是指页脚区域固定在浏览器窗口可视区域底部，即使页面的主体内容不足以将页脚区域推到浏览器可视区域的底部，使用CSS3实现就很简单最关键的技巧是让body设成伸缩容器，并且使用flex属性让footer之前的元素具有伸缩属性。如果希望整个页面的布局要和浏览器窗口可视区域一样高，首先需要保证html和body元素的高度要和浏览器窗口的可是区域高度一样。代码如下html，body{
flex实现经典的sticky footer布局
yshx1990的专栏
10-12 591
flex实现sticky footer布局
有关Flex布局(弹性布局)的基本知识和常用布局
qq_43601848的博客
03-03 187
1.采用flex布局的元素称为''容器'':容器有两个轴,主轴和侧轴 2.容器的属性 1.flex-direction : 决定主轴的方向 flex-direction: row | row-reverse | column | column-reverse; 主轴是水平方向: flex-direction:row(默认值):起点在左边 flex-direction:row-reverse:起点在右边 主轴是垂直方向: flex-direction:column:起点在上沿 flex-d
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 228
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
【React】CSS 局部样式
小秀的博客
04-26 387
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 293
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1175
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
flex布局做一个田字格
08-23
要使用 Flex 布局实现一个田字格，可以按照以下步骤进行操作： 1. 创建一个容器元素，假设使用 `<div>` 元素作为容器，可以给它添加一个类名或者 ID，比如 `grid-container`。 2. 在 CSS 中为容器元素设置 Flex 布局属性，可以使用 `display: flex;` 来启用弹性布局。 3. 设置容器元素的宽度和高度，这取决于你希望田字格占据的空间大小。可以使用 `width` 和 `height` 属性来设置。 4. 在容器元素内部创建四个子元素，分别代表田字格的四个方向。可以使用 `<div>` 元素作为子元素，并为它们添加类名或者 ID，比如 `grid-item`。 5. 在 CSS 中为子元素设置 Flex 布局属性，可以使用 `flex: 1;` 来让子元素填充剩余空间。 6. 如果你希望子元素之间有间距，可以为容器元素添加 `justify-content` 和 `align-items` 属性来调整子元素的对齐方式和间距。 最终的 HTML 结构类似于： ```html <div class="grid-container"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div> ``` 对应的 CSS 样式可以是： ```css .grid-container { display: flex; width: 300px; height: 300px; } .grid-item { flex: 1; background-color: #ccc; } ``` 以上代码将创建一个大小为 300x300 像素的田字格，每个格子的背景颜色为灰色。 你可以根据实际需求调整容器元素和子元素的样式，来达到你想要的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值