星哥的博客

  • 首页
  • 系统
  • 虚拟机
  • 网站开发
  • 硬件外设
  • VPS/云主机
  • 心情随笔
  1. 首页
  2. 网站开发
  3. Code
  4. 正文

纯CSS实现侧边栏/分栏高度自动相等

2014年11月9日 2581点热度 2人点赞 0条评论

这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。

核心的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;}

左边,无高度属性,自适应于最高一栏的高度
右边,无高度属性,自适应于最高一栏的高度
中间,高度600像素,左右两栏的高度与之自适应

说明:核心CSS代码部分的3000像素是个可变值,如果您的分栏高度不可能高度超过2000像素,您就可以设为2000像素,如果会超过3000像素,那么您要修改值为4000像素或是更高。

父标签的overflow:hidden属性是必须的,否则会显示溢出的内容。

其他一些分栏高度处理的方法:

margin负值实现分栏高度显示一致可以说是最好的方法,当然,还有其他一些轻便的替代方法。例如使用min-height属性,IE6不支持min-height但是height会自动撑高,所以min-height + _height的组合也是常用手段之一;另外就是使用背景图片了,利用背景图片的垂直平铺,可以模拟分栏的等高背景效果,但是,此方法对布局宽度有一定的要求,如果布局宽度改变,背景图片可能也要做一番修改。

标签: 暂无
最后更新:2014年11月9日

wangxingcs

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

This site uses Akismet to reduce spam. Learn how your comment data is processed.

wangxingcs

这个人很懒,什么都没留下

我的博客

仅记录一些有用的教程,自己的经历,已屏蔽各大搜索引擎收录。

新浪微博 @wangxingcs

Twitter @wangxingcs(常在)

最新 热点 随机
最新 热点 随机
Proxmox VE(PVE)6.X 添加硬盘 PVE解决VM is locked问题 Proxmox VE配置更新源 黑群晖显示真实CPU信息(支持7.0.1) Proxmox VE直通硬盘(全盘映射方式) PVE去除“没有有效订阅”提示
PVE去除“没有有效订阅”提示 DX论坛常用SEO设置 WIN10下MarkdownPad HTML渲染错误(This view has crashed) 的解决办法 + 注册码 织梦独立模型的动态浏览修改方法 为老婆购买了神舟飞天UI43 D0 PHP5.3及以上安装配置ZendGuardLoader
标签聚合
群晖 FineCMS 虚拟机 PVE CMS DSM MTP 驱动

COPYRIGHT © 2015-2023 wangxingcs.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

陕ICP备13007295号