css经典布局—Sticky footers布局
参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html
效果:将footer固定到底部。文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾。
以下这种方案:布局虽然复杂,但兼容性最好
html部分
<div class="detail">
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close"></div>
</div>
css部分
<style>
.clearfix {
display: inline-block;
}
.clearfix:after {
display: block;
content: ".";
height:;
line-height:;
clear: both;
visibility: hidden;
} .detail .detail-wrapper {
height: auto;
min-height: 100%;
}
.detail .detail-wrapper .detail-main {
margin-top: 64px; /* 必须使用和footer相同的高度 */
padding-bottom: 64px; /* 必须使用和footer相同的高度 */
}
.detail .detail-close {
position: relative;
margin: -64px auto 0 auto; /* footer高度的负值 */
width: 32px;
height: 32px;
clear: both;
font-size: 32px;
}
</style>
css经典布局—Sticky footers布局的更多相关文章
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- css经典布局学习
. 布局 布局是css的重头戏,每个系统的布局都有其各自的特点.无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下.例如: 经典三列布局 Bootstrap栅格布局 百度首页布局 微 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- 前端经典布局:Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- 只要一行代码,实现五种 CSS 经典布局
常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
随机推荐
- MyBatis中log4j 和 参数 和 分页和别名 功能
1.配置全局文件,注意各个配置标签的顺序 properties?, settings?, typeAliases?, typeHandlers?, objectFactory?, objectWr ...
- 70.app上架被拒(info.plist定位参数配置)
问题一: Your app declares support for location in the UIBackgroundModes key in your Info.plist file but ...
- apache ab工具
Apache ab并发负载压力测试 ab命令原理 Apache的ab命令模拟多线程并发请求,测试服务器负载压力,也可以测试nginx.lighthttp.IIS等其它Web服务器的压力. ab命令 ...
- boost-使用说明
1. boost库中大部分组件不需要编译,直接包含对应头文件即可使用,如#include "boost/array.hpp",因为组件的声明和实现都包含在头文件hpp中. 其它一些 ...
- bootstrap 后台模板
http://wangye0119-html1.demo.smallseashell.com/index.html
- Atcoder Regular-074 Writeup
C - Chocolate Bar 题面 There is a bar of chocolate with a height of H blocks and a width of W blocks. ...
- 2.3.4volatile的原子性
关键字volatile虽然增加了实例变量在多个线程之间的可见性,但它却不具备同步性,那么也不具备原子性. 测试 package com.cky.thread; /** * Created by edi ...
- spoj high
matrixtree定理裸体,学了行列式的n^3解法,(应该是能应用于所有行列式): 代码是参考某篇题解的... #include<iostream> #include<cstrin ...
- 20169207《Linux内核原理与分析》第九周作业
第九周的实验依旧和往常的一样,主要包括两部分.一是1.阅读学习教材「Linux内核设计与实现 (Linux Kernel Development)」第教材第13,14章.二是学习MOOC「Linux内 ...
- Android Studio开发之Gradle科普
我们以前开发都是用 Eclipse ,而 Eclipse 大家都知道是一种 IDE (集成开发环境),最初是用来做 Java 开发的,而 Android 是基于 Java 语言的,所以最初 Googl ...