CSS等高布局
做一些后台项目,和一下带侧边栏项目的时候登高布局很常用,总结了下有几种
1.margin-bottom方法
这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下(数值不固定):
- margin-bottom:-3000px; padding-bottom:3000px;
再配合父标签的overflow:hidden
属性即可实现高度自动相等的效果。
举个简单的实例吧,如下CSS及HTML代码:
- #content{overflow:hidden;}
- .left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
- .right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
- .center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}
- <div id="content">
- <div class="left">左边,无高度属性,自适应于最高一栏的高度</div>
- <div class="right">右边,无高度属性,自适应于最高一栏的高度</div>
- <div class="center">中间,高度600像素,左右两栏的高度与之自适应</div>
- </div>
- 后续再慢慢总结比较实用的几种
- 参考:http://www.w3cplus.com/css/creaet-equal-height-columns
http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width
CSS等高布局的更多相关文章
- CSS等高布局的6种方式
× 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
- CSS等高布局的7种方式
前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...
- css 等高布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [css]等高列的简单实现
又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 如何用css实现"等高布局"。
有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- 关于css解决俩边等高的问题(等高布局)
等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...
随机推荐
- 一个自己用的代码备份工具,支持delphi,android,java,可以自己添加配置,灵活支持大部分编程语言
下面就是这个软件的下载地址 http://files.cnblogs.com/files/stevenlaz/release.zip 绿色软件 MConfig.exe 进行安装,或者卸载 MBacku ...
- Eclipse 反编译插件安装jad
Eclipse的反编译插件一直在用jad,感觉很不错. 刚下了个新版的eclipse,配置jad的时候发现要多设置个东西. 从头开始 环境介绍: eclipse version:Kepler Rele ...
- 正则表达式匹配完整img标签php实现
处理html富文本的时候,碰到批量处理img标签,要把img标签格式化,并且去除不用的代码,class,各种data-等,首先想到使用正则匹配,然后处理匹配到的img标签和参数,经过一番尝试终于搞定了 ...
- Mac mysql修改密码
在网上看了很多的办法,其实解决办法都对,只是没有说明白: 1,首先启动mysql服务 2,mysqladmin -uroot -p 'newpassword' 此时需要输入登陆密码(数据库的密码,刚安 ...
- OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
- 「2013-9-14」Change Remote Desktop Port
修改远程桌面服务(Remote Desktop Service)的端口号,有几点原因: 默认是 3389 端口,也是经常被端口嗅探器扫描的一个端口.更换端口号,一定程度上可以带来更好的安全性. 如果一 ...
- 解决Win7下打不开chm文件的方法
win7 无法打开chm操作如下:1,在命令行运行regsvr32 itss.dll2,在命令行运行regsvr32 hhctrl.ocx
- PHP程序员的技术成长规划(转)
第一阶段:基础阶段(基础PHP程序员) 重点:把LNMP搞熟练(核心是安装配置基本操作) 目标:能够完成基本的LNMP系统安装,简单配置维护:能够做基本的简单系统的PHP开发:能够在PHP中型系统中支 ...
- MacOS 10.8更新SVN到1.8.4的问题和解决方法
因为要导入以前的项目,但以前项目里内含有的svn信息,所以xcode默认安装的svn1.6是无法删除svn信息,据说需要svn1.7才能清除掉svn信息.所以必须要升级svn的版本. 我在网上找了各种 ...
- Winform 中的KeyDown
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...