css sticky footer布局

最新推荐文章于 2022-09-09 06:57:17 发布
最新推荐文章于 2022-09-09 06:57:17 发布
阅读量405 收藏
点赞数
分类专栏： css 文章标签： css sticky footer

1.flex方法

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>Document</ title>
< style>
body{
display: flex;
flex-flow: column;
min-height: 100 vh;
overflow: auto;
}
.container{
flex: 1;//占据剩余空间
}
.close{
height: 100 px;
background: red;
}
</ style>
</ head>
< body>
< div class= "container">
< div class= "main">
< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</ p>
</ div>
</ div>
< div class= "close" style= "font-size: 30px;">
x
</ div>
</ body>
</ html>


2.伪元素after

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>Document</ title>
< style>
*{
margin: 0;
}
html, body{
height: 100 %;
}
.container{
min-height: 100 %;
margin-bottom: -100 px;//-100PX用来抵消after的100px
}
.container:after{
content: '';
display: block;
height: 100 px;//也可以设置1px撑开container的高度（如果要求不严格的话）
}
</ style>
</ head>
< body>
< div class= "container">
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
< p>hhhhhhhhhhhhhhhhhhh</ p>
</ div>
< div class= "close" style= "font-size: 30px;height:100px;background: red;">
x
</ div>
</ body>
</ html>

Saamao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css揭秘 -- Sticky footers解决方案
zwkkkk1的博客
03-18 846
最近在读《CSS Secrets》，结合网上的许多文章写了笔记，希望大家都能有所收获 注：《CSS Secrets》是 Lea Verou最新著作，这本书讲解了有关于CSS中的一些小秘密，是一本所有CSSer值得一读的一本书。我自身的感受是：这确实是多年难得一见的重磅CSS书籍，看得很过瘾，CSS进阶必读！ 问题   在网页设计中，存在一个相当古老但又相当常见的问题，它是前端...
CSS Sticky footer完美底部布局
景洪的博客
08-01 4364
html结构：<div class="container"> <div class="content-wrapper> <div class="content">内容区域，可随机长度</div> </div> <div class="close"> <div> <div class ="close">关闭图标</div>始终再底部.css代码：.containe
css中的position定位
forteenBrother的博客
07-31 525
position属性用于指定一个元素在文档中的定位方式。定位属性：top right bottom left 决定了元素的最终显示位置。
CSS - sticky footer
sinat_33184880的博客
09-07 158
sticky footer是一种布局解决方案，规定屏幕内容在占满一屏幕 / 未占不满一屏幕的情况下，footer出现的位置 内容未超过一屏幕的高度时，footer至于屏幕最下方 内容超过一屏幕的高度时，footer至于内容的下方 两种常见的解决方案 1.使用min-height、padding-bottom、margin-top * { margin: 0; padding...
sticky-footer的三种解决方案
汉堡请不要欺负面条
05-14 1957
sticky-footer的三种解决方案          在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎。 那么面对这样的问题有什么解决方法呢？ 首先我们先构建简单...
css sticky footer实现,CSS Sticky Footer 几种实现方式
weixin_28746457的博客
08-03 237
什么是 “Sticky Footer”所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。先来看看下面的例子, 代码如下顶部中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中...
CSS Sticky Footer布局,使DOM始终位于页面最下方，不会与上方内容重叠.zip
01-08
通过这些方法，我们可以灵活地实现CSS Sticky Footer布局，适应不同场景和需求。当然，具体使用哪种方法，还需要根据项目需求和浏览器兼容性考虑。随着现代浏览器对新CSS规范的支持度不断提升，使用Flexbox或Grid...
详解CSS经典布局之Sticky footer布局
01-21
何为Sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当...
CSS Sticky Footer实现代码
09-22
CSS Sticky Footer 是网页设计中一种常见的布局技巧，它能让页面的底部始终固定在视口的底部，无论页面内容是否填充满整个屏幕。这种布局方式在响应式设计中尤其有用，可以提供良好的用户体验，确保用户在任何情况下...
css sticky footer经典布局的实现
11-21
什么是sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。...
CSS Sticky Footer 几种实现方式
01-19
什么是 “Sticky Footer” 所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 先来看看下面的例子, 代码如下 <div class=header> 顶部 </div> <div class=main> <p>中间部分</p> <p>中间部分</p> <p>中间部分</p> <p>中间部分</p> <p>中间部分</p>
css宽高自适应布局，实现Sticky Footer的三种布局方式
zhouzuoluo的博客
04-21 1027
宽度自适应布局： 1、使用场景： 一侧（左侧或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于某个局部功能块，常见于各种web系统（OA系统，ERP系统）等。常见的有两列布局或者三列布局（甚至是多列布局）。 2、实现原理： 以两列布局为例，一侧固定宽float浮动，另一侧不浮动并使用margin属性给浮动层留...
经典的css sticky footer 布局
SilenceJude的博客
08-28 332
【sticky footer】 指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。 实现效果如下图。 实现—— header.vue中首先创建3个div层。detail-wrapper,detail-main,detail-close &lt;div v-show="detailShow" class="d...
css Sticky footer完美底部布局
少少的博客
06-29 634
该布局是底部定位在最下面，当内容小于屏幕的高度，整个内容也占整个屏幕；当大于屏幕的高度，则可以滚动。而底部则始终在最底部 &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;content-view&amp;quot;&amp;amp;gt; &amp;amp;lt;div
css经典布局系列四——粘连（css sticky footer）布局
weixin_34186931的博客
04-21 583
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 三个组成部分：wrap容器,main内容,footer脚部 方法一：...
网页布局—StickyFooter
zp1996323的博客
02-08 858
网页布局中经常会遇到这种问题，那就是我们的网页footer并不能呢一直停留在网页的底部。我们一般的惯用方法就是将网页的footer固定定位。但是如果我们将footer固定定位后，我们的网页内容多，一屏显示不出来时，我们的footer仍在窗口的底部，并且遮挡我们的内容，那么我们今天的这种布局方式，就是来解决这个问题的。 html代码：<div class="container"> 页面主体内
Sticky footers详解
weixin_43905830的博客
05-18 132
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，最近在做页面时就遇到了这种情况，在页面足够长时我希望一部分内容一直在页面最底层，当页面不够时会出现滚动条，这时这一部分内容任然固定在最底部。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，
[CSS入门到进阶] 4行CSS实现footer置底！超常见的需求，快来收藏
Hull Qin
09-09 4675
大部分网站都需要footer，而footer置底是一个常见的产品诉求。今天我们用4行CSS样式，实现这个常见的需求！快来收藏～
css 中 Sticky footers (让页脚紧贴页面底部的方法)
fgg9655的博客
10-08 438
需要三个层       一个层包内容  一个内容  一个层底部 div class="detail-wrapper clearfix" > 注意要清除浮动 div class="detail-main">div> div> div class="detail-close"> i class="icon-close">i> div> .detail .deta
css sticky
最新发布
05-30
CSS中的`position: sticky`可以用于创建一个"粘性"（sticky）的元素，即当元素滚动到特定位置时，它将固定在屏幕上方或下方，直到滚动回到该位置。 它的语法如下： ``` position: sticky; top: 0; /* 或 bottom: 0...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值