兼容性良好的 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设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...
随机推荐
- Apache同一个IP上配置多域名
NameVirtualHost *:80 <VirtualHost *:80> ServerAdmin webmaster@yourdomain.com DocumentRoot &quo ...
- SpringSecurity 3.2入门(7)自定义权限控制介绍
总结Spring Security的使用方法有如下几种: 一种是全部利用配置文件,将用户.权限.资源(url)硬编码在xml文件中. 二种是用户和权限用数据库存储,而资源(url)和权限的对应关系硬编 ...
- c# 文件名排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...
- frp使用总结
笔者所知并成功实现内网穿透的方法: 花生壳 (需要花8块钱,使用花生壳给的二级域名,这里不做介绍) ngrok (免费,但是每次重启服务二级域名会变,付费的$5每月不会变) frp(开源免费,需要有自 ...
- XML再深入
XML 命名空间 XML 命名空间提供避免元素命名冲突的方法. 使用前缀来避免命名冲突 在 XML 中的命名冲突可以通过使用名称前缀从而容易地避免. 该 XML 携带某个 HTML 表格和某件家具的信 ...
- CentOS-7 本地yum源挂载
在Linux无法连接到互联网时,手动安装依赖是及其麻烦的一件事,需要花费大量的时间寻找rpm包.但在配置本地yum源后,绝决依赖问题就会变得非常简单. 一.准备 centos-7.ISO镜像文件: 二 ...
- 弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...
- 转:如何利用已有的切片文件生成TPK
Tpk是ArcGIS 10.1即将推出的一种新的数据文件类型,主要是用于将切片文件打包形成离线地图包.Tpk可以在ArcGIS Runtime中作为切片底图被加载.在ArcGIS 10.1中Tpk的生 ...
- Shader之ShaderUI使用方法
shader中的宏定义在material中Inspector中打开 Shader "Custom/Redify" { Properties{ _MainTex("Base ...
- Python学习系列----第六章 数据结构
本章主要讲的是python中重要的四种数据结构,分别是列表.元组.字典和集合. 6.1 列表 list 是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目.列表中的项目应该包括在方括 ...