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单线程,加载比较慢,就会有那么一个过程,查找了很 ...
随机推荐
- 自动化测试工具QTP和SilkTest横向PK(转)
转自:http://www.uml.org.cn/Test/201405212.asp?artid=1686 众所周知,自动化测试工具曾几何时三足鼎立,Mercury QTP/WinRunner系.I ...
- 多媒体技术基础之---Come on!来点儿音乐吧
其实要说在Linux系统下播放音乐,确实是一件让人非常抓狂的事情,抛开各种音频格式的商业授权不说,即使提供给你相应的解码库,能玩儿得转的人那又是少之又少.可能有些盆友说ubuntu这方面确实做得不错, ...
- wpf中button的无边框实现
设置button的样式为:Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}";即可
- 不要轻易delete void*指针,这样会隐藏比较多的错误。
#include<iostream> using namespace std; class Object{ void* data; const int size; const char i ...
- css3之动画
animation属性 属性 描述 @keyframes 动画名 动画关键帧 animation 动画的6个属性 animation-name 动画的名称 animation-duration 动画的 ...
- 委托、匿名委托、Lambda 表达式、Expression表达式树之刨根问底
本篇不是对标题所述之概念的入门文章,重点在阐述它们的异同点和应用场景.各位看官,这里就不啰嗦了,直接上代码. 首先定义一个泛型委托类型,如下: public delegate T Function&l ...
- 分享MYSQL中的各种高可用技术(源自姜承尧大牛)
分享MYSQL中的各种高可用技术(源自姜承尧大牛) 图片和资料来源于MYSQL大牛姜承尧老师(MYSQL技术内幕作者) 姜承尧: 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各 ...
- C++11 并发指南后续更新
C++11 并发指南的第一篇是 2013 年 8 月 3 号写的,到今天(2013 年 8 月 31 号)差不多一个月了,前前后后共写了 6 章(目前共 8 篇)博客介绍 C++11 的并发编程,但还 ...
- maven 打包 xml文件
说起来手贱啊,搞了两个小时,就是因为打包的时候,maven无法把xml文件打包到正确的位置. 本来应该是打包到 com/presistence包下,结果打出来有两个包,一个是com/presisten ...
- 你在用什么思想编码:事务脚本 OR 面向对象?
最近在公司内部做技术交流的时候,说起技能提升的问题,调研大家想要培训什么,结果大出我意料,很多人想要培训:面向对象编码.于是我抛出一个问题:你觉得我们现在的代码是面向对象的吗?有人回答:是,有人回答否 ...