纯CSS实现侧边栏/分栏高度自动相等.
这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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>
分享到:
相关推荐
用纯JS实现iFrame框架分栏显示效果
resize 拖拉分栏布局
原创JS分栏效果,面向对象, 使用简单。网上我也见到一些分栏效果,也有一个jquery的插件jquery.splitter.js, 但是他们基本都没有解决一个问题:如果页面上有iframe, 当拖动分割线经过iframe的时候,鼠标不听使唤了...
主要介绍了jQuery实现滑动的标签分栏切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
分栏程序,能实现分栏并计数分栏程序,能实现分栏并计数
蓝色通用左右分栏css后台模板,界面大气美观 提供在线预览 预览地址:http://www.nongfuit.com/demo/125.aspx
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样...
实现了 登录 动态分栏菜单 实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单
可爱分栏css模板下载 可爱 分栏 韩国 模板下载
div+css+jquery左右分栏可收缩仿框架 一个页面搞定。无需嵌套。不兼容IE6!
请综合运用C语言的基本知识,开发该程序,要求实现如下基本功能: 1. 输入(源文件名、目标文件名); 2. 程序中设定分栏数、栏宽、每页行数等; 3. 分栏、编号(读出源文件对文件进行分栏、编号排版显示在屏幕上)...
页面左中右分栏布局在目前的网页布局中是比较常见的,下面就与大家分享两个不错的方法可以实现左中右分栏布局,代码很详细,需要的朋友可不要错过
<!DOCTYPE ... <head> <title></title>...meta charset="gb2312" />...style type="text/css"> body{ background-color:silver; } .page_center { width:600px;
VS2015 report报表 分栏 (分列),最新的教程,经过本人实践总结。VS2015 report报表 分栏 (分列),最新的教程,经过本人实践总结。VS2015 report报表 分栏 (分列),最新的教程,经过本人实践总结。VS2015 ...
VB窗口左右分栏代码,实现左右分栏,拖动改变大小、比例
在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的...
NULL 博文链接:https://jxdwuao.iteye.com/blog/479698
springmvc+jdbc+mysql+bootstrap整合,提取sql到xml,使用iframe实现上下、左右分栏
利用bootstrap配合jQuery实现select多选,全选全不选,界面美观大气