兼容性良好的 sticky-footer 布局
<div class="content">
<div class="content-wrapper">
<div class="content-main">
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<!--<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>
<p>水光潋滟晴方好,山色空蒙雨亦奇,欲把西湖比西子,淡妆浓抹总相宜</p>-->
</div>
</div>
<div class="content-end">
<p>赞西湖</p>
</div>
</div>
.content {
position: fixed;
top:;
left:;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0,0,0,0.2);
color: #fff;
}
.content-wrapper {
display: inline-block;
min-height: 100%;
}
.content-main {
padding-bottom: 64px;
}
.content-end {
position: relative;
width: 48px;
margin: -64px auto 0 auto;
clear: both;
}
兼容性良好的 sticky-footer 布局的更多相关文章
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 前端经典布局:Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- sticky footer布局
一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...
- css sticky footer 布局
方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...
- sticky footer 布局
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- css sticky footer布局
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...
随机推荐
- Problem E: 积木积水 ——————【模拟】
Problem E: 积木积水 Description 现有一堆边长为1的已经放置好的积木,小明(对的,你没看错,的确是陪伴我们成长的那个小明)想知道当下雨天来时会有多少积水.小明又是如此地喜欢二次元 ...
- spring-boot 1.4.x遇到的cpu高的问题
如果你的spring-boot应用里tomcat线程耗cpu较高,并主要耗在做读取jar的操作上(堆栈类似下面),可能跟我们遇到同样的问题. CRC32.update(byte[], int, int ...
- java 获取网络地址图片
收藏一个获取网络图片的方法. //获取网络图片 public void ImageRequest(String ImageName,String GifUrl) throws Exception { ...
- 设备信息工具pv-jd快速上手
pv-jd 这是一个判断设备信息的小工具,可以判断出移动端还是PC端,提供了多种API 快速开始 安装npm install pv-jd -S 示例 import {judgeDevice, judg ...
- webstorm上传vue代码至git
Git在push时候,提示:push to origin/master was rejected 解决方案如下: 提交代码顺序 webstorm右键项目名称==>Git==>Commit ...
- ASP.NET MVC Tips
1. _ViewStart.cshtml会在调用每个页面的时候执行,我们可以在页面内设置Layout页面,也可以在这个页面写一些逻辑来根据不同的情况引用不同的Layout页面,详情请参考此处:
- collectd配置
udp proxy - 192.168.48.112 cat > /etc/collectd_25801.conf << EOF Hostname "kvm-48-112& ...
- web开发路径问题解决
使用监听器解决路径问题 监听器:
- GBase数据库——常用命令
针对GBase 8a 版本 1数据库操作与维护 1.1数据库启停 [root@OMMB-66-V10-001 ~]# service gcware stop Stopping GCMonit succ ...
- 二、安装桌面——Linux学习笔记
安装桌面并不是商业化用的,只是为了熟悉Linux文档结构而已. 这个比较简单 1.输入安装桌面命令 # yum -y groups install "GNOME Desktop" ...