sticky footer 实现页脚块位置根据页面内容长度变化

布满荆棘的人生 2023-03-14 05:59 37阅读 0赞

##### sticky footer，指的是当页面内容不够长的时候，页脚的位置粘贴在视窗底部；当页面内容足够长时，页脚块会被内容向下推送，位置显示在内容下方，不会遮挡内容 #####

sticky footer比较常用的布局方式如下：

<div class="detail">
    	
    	<div class="detail-wrapper clearfix">
    		<div class="detail-main">
    			
    		</div>
    	</div>
    	
    	<div class="detail-close">
    		<i class="icon-close"></i>
    	</div>
    </div>

样式如下（这个例子中我的最外层div是一个遮罩层，样式根据自己的需求修改）

.clearfix::after { 
      content:"";
      display: block;
      height:0;
      line-height: 0;
      clear:both;
      visibility: hidden;
    }
    .clearfix{ 
      display: inline-block;
    }
    
    .detail { 
    	position:fixed;
    	z-index:100;
    	left:0;
    	top:0;
    	width:100%;
    	height:100%;
    	overflow:auto;   /*不能是hidden*/
    	background:rgba(0,0,0,.5);
    }
    .detail-wrapper { 
    	min-height:100%;
    	width:100%;
    }
    /*需要给底部的区域留位置，使用padding-bottom*/
    .detail-main { 
    	padding-bottom:64px; 
    	margin-top:64px;
    }
    /*底部区域*/
    .detail-close { 
    	position:relative;
    	width:32px;
    	height:32px;
    	margin:-64px auto 0 auto;   /*注意margin-top需要是负值*/
    	clear:both;  
    	font-size:32px;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关 sticky footer 实现页脚块位置根据页面内容长度变化

sticky footer，指的是当页面内容不够长的时候，页脚的位置粘贴在视窗底部；当页面内容足够长时，页脚块会被内容向下推送，位置显示在内容下方，不会遮挡内容 stic

布满荆棘的人生/ 2023年03月14日 05:59/ 0 赞/ 38 阅读

相关 [golang]-input 长度随内容长度自动变化

导语：发布时需要让用户确认一下自己提交的参数不允许修改。遇到一个比较长的input 无法显示所有的内容如图 <li> 发布job模块: <input reado

Love The Way You Lie/ 2022年12月20日 11:12/ 0 赞/ 227 阅读

相关 Sticky Footer , fixed footer, pinned footer

1. through css > \footer \{ > > position:fixed; > > left:0px; > > botto

女爷i/ 2022年12月20日 01:50/ 0 赞/ 189 阅读

相关 html页脚紧贴页面底部,CSS：页脚紧贴底部

我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。方案一描述：以下方案简单、干净、现代并且没有hack，适用于IE8+, Chr

偏执的太偏执、/ 2022年10月06日 04:00/ 0 赞/ 341 阅读

相关 Sticky Footer 让页脚紧贴页面底部

功能效果：当页面内容不超过当前屏幕高度时，页脚在屏幕的底部；当页面内容过多超过当前屏幕高度时，页脚在内容后面。图片效果演示：当页面内容不超过当前屏幕高度时： ![

一时失言乱红尘/ 2022年07月12日 08:52/ 0 赞/ 343 阅读

相关 listview 设置页脚（footer）

有时候使用ListView显示一些数据时，希望在列表项的尾部增加一个页脚（注：不是放在屏幕的最低端），页脚会随着ListView的数量的增加而自动跟随，由于ListView在数

蔚落/ 2022年06月08日 07:30/ 0 赞/ 274 阅读

相关 css揭秘 -- Sticky footers解决方案

最近在读《CSS Secrets》，结合网上的许多文章写了笔记，希望大家都能有所收获 > 注：《CSS Secrets》是 Lea Verou最新著作，这本书讲解了有关于CS

快来打我*/ 2022年05月29日 05:53/ 0 赞/ 244 阅读

相关父页根据iframe子页内容调整iframe页面大小

一.带有iframe的父页 1）html <!DOCTYPE html> <html> <head> <title>带有iframe的父页

客官°小女子只卖身不卖艺/ 2022年04月13日 06:56/ 0 赞/ 465 阅读

相关让web页面页脚footer固定在页面底部

有时候，我们发现很多页面内容不多的时候，页面底部内容飘到了中间： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

野性酷女/ 2022年03月29日 12:08/ 0 赞/ 457 阅读

相关 Sticky footer

Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部

àì夳堔傛蜴生んèń/ 2022年03月16日 06:48/ 0 赞/ 269 阅读