CSS布局自适应高度解决方法
这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
先看代码:
#wrap{
overflow: hidden;
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
实现原理:
块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom(足够大的值)到列的块元素 。
应用margin-bottom(足够大的值)到列的块元素。
padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。
CSS布局自适应高度解决方法的更多相关文章
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- iframe自适应高度解决方法 .
<div id="leftBar"> <iframe name="tag" src="_iframe.html" styl ...
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- float过后 高度无法自适应的解决方法
float过后 高度无法自适应的解决方法: 在float层最外面包一层div即可.
- IE6/7/8 CSS兼容性问题和解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- IE CSS Bugs 列表和解决方法
我们在开发中我们常会在IE中遇到很多莫名的bug,尤其是老态龙钟的IE6浏览器.为了提高我们的开发效率,需要经常总结,整理工作中遇到的问题.我们在网络上找到的IE Bugs 资料是零散的.不过,在老外 ...
- 浏览器css bug及bug解决方法
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- Div自适应高度的方法
http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...
- Iframe 自适应高度的方法!
第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
随机推荐
- codeforces 713C C. Sonya and Problem Wihtout a Legend(dp)
题目链接: C. Sonya and Problem Wihtout a Legend time limit per test 5 seconds memory limit per test 256 ...
- MATLAB基本命令
eye(n)创建n阶单位矩阵 zeros(n)创建n阶0方阵 rand(m,n)创建m*n阶元素为从0到1的均匀分布的随机数矩阵 round(A)对矩阵A中所有元素进行四舍五入运算 A^-1用幂运算求 ...
- fastDFS 一二事 - 简易服务器搭建(单linux)
什么是FastDFS FastDFS是一个叫余庆的哥们用c语言编写的一款开源的分布式文件系统 功能有冗余备份.负载均衡.线性扩容等,高可用.高性能 可以用FastDFS搭建一套高性能的文件服务器集群提 ...
- throw跟throws关键字
throws关键字 定义一个方法的时候可以使用throws关键字声明.使用throws关键字声明的方法表示此方法不处理异常,而交给方法调用处进行处理. throws关键字格式: public 返回值类 ...
- 一、IOS运行原理
1.首先执行main函数 2.执行UIPaalicationMain函数 3.UIApplication函数内部 1>创建一个UIApplication实例.这个UIApplication对象是 ...
- Eclipse调试按钮消失问题
Window-->Reset Perspective 把Eclipse重置一下,然后 点击红色框圈的向下的箭头,在弹出的菜单里边,点击 show debug toolbar 这个菜单项目,然后奇 ...
- GridView自定义删除操作
今天,我们这里要说的就是在GridView里面如何新添加一行“删除”列,如何删除前弹出通知等. 首先,我们前端的代码如下: <asp:GridView ID="gridViewDxjk ...
- 从客户端中检测到有潜在危险的request.form值
今天被这个问题卡住了,在用到CKEDITOR的时候,老是报错显示输入字符存在潜在危险,之后百度了一下,试了这两种方法: 解决方案一: 在.aspx文件头中加入这句: <%@ Page ...
- Java系列:JVM指令详解(上)(zz)
一.未归类系列A 此系列暂未归类. 指令码 助记符 说明 59:iastore 60:lload 6 //因为str ...
- Ubuntu Navicat for MySQL安装以及破解方案
今天发现Navicat for MySQL有LINUX版本了哈, 开心的说,首先上官网上下载LINUX版本: http://www.navicat.com/download 1. 下载 navicat ...