css经典布局—stick footer布局
<div id="wrap">
<div id="main" class="clearfix">
<div id="content"></div>
<div id="side"></div>
</div>
</div>
<div id="footer"></div>
css部分
*{padding: 0;margin: 0;}
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;margin-top: -150px; /* footer高度的负值 */height: 150px;clear:both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
css经典布局—stick footer布局的更多相关文章
- css 中 stick footer 布局实现
做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- stick footer布局
需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...
- 网页footer背景(stick footer布局)
今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小 先说一下开始的做法: ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- 只要一行代码,实现五种 CSS 经典布局
常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...
- css经典布局学习
. 布局 布局是css的重头戏,每个系统的布局都有其各自的特点.无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下.例如: 经典三列布局 Bootstrap栅格布局 百度首页布局 微 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
随机推荐
- Oracle.ManagedDataAccess.dll 连接Oracle数据库不需要安装客户端
最开始,连接Oracle 数据是需要安装客户端的,ado.net 后来由于微软未来不再支持 System.Data.OracleClient 这个 Data Provider 的研发,从 .NET 4 ...
- mac环境下支持PHP调试工具xdebug,不需要建项目server
先让php支持xdebug 方式一: https://xdebug.org/download.php 下载相应的xdebug 可以到http://xdebug.org/wizard.php 把php ...
- Android TextView属性大全
android:ems 设置TextView的宽度为N个字符的宽度. android:maxems 设置TextView的宽度为最长为N个字符的宽度.与ems同时使用时覆盖ems选项.android: ...
- mybatis中sql语句的批量插入
<!-- 收件箱插入收件信息 --> <insert id="insertReceiveemail"> <!-- 生成一条U ...
- python学习笔记 list
1.list中的任一元素可以是任一类型.可以是混合的,如,前两个字符串后面的是数字.都是可以的. 2.可以用-1表示最后一个元素. 3.注意不要越界. 4.len(mates) 用来计算list的大小 ...
- hibernate第二天
hibernate的核心思想就是将之前对单个字段的操作变为操作一个对象,使用了ORM(Object relation mapping)对象关系映射的思想 · 在hibernate中对数据库特殊字段的有 ...
- 虚拟机下 solr7.1 cloud 集群搭建 (手动解压和官方脚本两种方式)
准备工作: vmware workstation 12,OS使用的是ubuntu16.04,三台虚拟机搭建一个solr集群,zookeeper共用这三台虚拟机组成zookeeper集群. zookee ...
- 当使用javac编译源文件时,如何查找import导入的类
当编写一个java源代码文件时,此文件通常被称为编译单元(有时也被称为转移单元).每个编译单元都必须有一个后缀名.java,而在编译单元内则可以有一个public类,该类的名称必须与文件名称一致.每个 ...
- C#.Net与MATLAB集成
在数学分析工具方面,MATLAB无疑是佼佼者,除了作为软件工具外,MATLAB的自定义编程语言以及混合编程的支持,使其可以与Python.R之类数学分析语言媲美.尤其是在一些传统领域的研究,由于其研究 ...
- Akka(41): Http:DBTable-rows streaming - 数据库表行交换
在前面一篇讨论里我们介绍了通过http进行文件的交换.因为文件内容是以一堆bytes来表示的,而http消息的数据部分也是byte类型的,所以我们可以直接用Source[ByteString,_]来读 ...