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单线程,加载比较慢,就会有那么一个过程,查找了很 ...
随机推荐
- windows防火墙打不开的处理办法
一.防火墙配置出错 开始-->运行-->gpedit.msc 这时,打开了组策略 在左面分级展开 计算机配置-->管理模板-->网络-->网络连接-->Window ...
- lock模拟CountDownEvent
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Int16, Int32, Int64 范围
Int16, 等于short, 占2个字节. -32768 32767 Int32, 等于int, 占4个字节. -2147483648 2147483647 Int64, 等于long, 占8个字节 ...
- Intellij idea 设置svn 父目录文件显示状态颜色
file-->setting-->version control
- C# 基础(4)
Ref 按地址传递,引用传递:即可以往外返值,也可以对内传值. Out是用于传出值, Ref是双向的,即可以传入,也可以传出. 在传参过程中,如果参数有out,那么改变方法中参数的值,调用者方法中变量 ...
- Linux更改服务器Hostname
在我们需要维护较多的服务器时,有意义的Hostname将时刻提醒我们这台服务器的功能. ****** 1.Debian echo '127.0.1.1 git-server' >> /et ...
- MS对WCF配置中security节点的解释
摘录地址:http://msdn.microsoft.com/zh-CN/library/azure/ms731347 <basicHttpBinding> 的 <security& ...
- 跟我一起学WCF(2)——利用.NET Remoting技术开发分布式应用
一.引言 上一篇博文分享了消息队列(MSMQ)技术来实现分布式应用,在这篇博文继续分享下.NET平台下另一种分布式技术——.NET Remoting. 二..NET Remoting 介绍 2.1 . ...
- 作业一:创建个人技术博客、自我介绍、简单的C程序
年9月14日中午12点: 一.主要内容 建个人技术博客(博客园 www.cnblogs.com) 本学期将通过写博客的方式提交作业,实际上,最终的目的是希望同学们能通过博客的形式记录我们整个学习过程 ...
- Wix 安装部署(二)自定义安装界面和行为
上一篇介绍了如何联合MSBuild来自动生成打包文件和对WIX的一些初步认识,http://www.cnblogs.com/stoneniqiu/p/3355086.html . 这篇会在上篇的基础上 ...