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) { ...
随机推荐
- UESTC 882 冬马党 --状压DP
定义:dp[i][j]为状态为j时,第i行符合条件的状态数 转移方程:dp[i][j] += dp[i-1][t] //t为上一行状态,与当前行不冲突. 从第一行开始向下枚举,每次枚举当前行的状态 ...
- HDU 3667 费用流(拆边)
题意:有n个城市(1~n),m条有向边:有k件货物要从1运到n,每条边最多能运c件货物,每条边有一个危险系数ai,经过这条路的费用需要ai*x2(x为货物的数量),问所有货物安全到达的费用. 思路:c ...
- 较多java书籍的网站 tools138.com
http://www.tools138.com/front/resource/java_book.jsp
- eclipse android 不会自动生成R.java文件和包的解决办法
eclipse下编写android程序突然不会自动生成R.java文件和包的解决办法 我的eclipse原来是好好的,什么问题都没有的,结果今天一打开新建一个android程序,发现工程里不会自动 ...
- ABP入门系列(6)——展现层实现增删改查
这一章节将通过完善Controller.View.ViewModel,来实现展现层的增删改查.最终实现效果如下图: 一.定义Controller ABP对ASP.NET MVC Controllers ...
- 七、Block 封装代码
1.概念:封装代码块,调用的时候使用 2.声明 返回类型(^名字)(参数1,参数2..) = (参数类型 变量1,参数类型, 变量2){ }; int (^Sum)(int,int) = ^(int ...
- PHP通用函数 - 日期生成时间轴
/** * 时间轴函数, Unix 时间戳 * @param int $time 时间 */ function TranTime($time) { //$time = strtotime($time) ...
- C语言 文件操作8--fputs()和fgets()
//fputs()和fgets() #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> # ...
- C# LUA 闭包
许多语言中有闭包的概念,C#的闭包以lambda表达式表现,可以实现与LUA完全一样的效果. //LUA------------------------------------------------ ...
- git流程及操作
一.git认识 git是什么?Git是目前世界上最先进的分布式版本控制系统 二.git安装 三.git创建本地库 1.首先选择e盘新建一个文件夹如douban 2.点击鼠标右键,执行Git Bash ...