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

一、为何要分栏高度一致?

分栏高度一致的目的是更加美观。举两个例子吧

2.1 对于分栏布局,我们或许会用边框(border)进行分隔,就如鄙人博客的分栏

这里写图片描述

此时最担心的问题就是高度不一致,尤其是无边框属性的分栏高度超过有边框属性的分栏,结果就会

这里写图片描述

2.2 对于分栏布局,我们或许会用实色填充背景,看我的双栏demo页面

这里写图片描述

但是,如果两栏的高度不一致,例如左侧的超出了范围,可能就会

这里写图片描述

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

这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下(数值不固定)

这里写图片描述

再配合父标签的overflow:hidden属性即可实现高度自动相等的效果

举个简单的实例吧,如下CSS及HTML代码

这里写图片描述

这里写图片描述

说明:核心CSS代码部分的3000像素是个可变值,如果您的分栏高度不可能高度超过2000像素,您就可以设为2000像素,如果会超过3000像素,那么您要修改值为4000像素或是更高。父标签的overflow:hidden属性是必须的,否则会显示溢出的内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gitservergitlab之搭建和使用

gitserver比較有名的是gitosis和gitolite,这两个管理和使用起来略微有些复杂,没有web页面,而gitlab则是类似于github的一个工具,github无法免费建立私有仓库,而且为了代码安全,于是在内网安装了一个自己实验…

CSS布局奇淫巧计之-强大的负边距

负的边距好像能减小元素在文档流中的尺寸一样,但事实上,它的尺寸大小并没变,只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,因此位置也就发生变化了。 实例: 因为P为block元素且没有指定…

[NHibernate] NHibernate对象关系映射工具了解

NHibernate是把Java的Hibernate核心部分移植到Microsoft .NET Framework上。它是一个对象关系映射工具,其目标是把.NET对象持久化到关系数据库。 NHibernate 是一个面向.NET 环境的对象/关系数据库映射工具。对象关系映射(O/R Mapping,Object Relational…

改变CSS世界纵横规则的writing-mode属性

1. writing-mode的原本作用 和float属性有些类似,writing-mode原本设计的是控制内联元素的显示的(即所谓的文本布局-Text Layout)。因为在亚洲,尤其像中国这样的东亚国家,存在文字的排版不是水平式的,而是…

IOS中定时器NSTimer的开启与关闭

调用一次计时器方法: [cpp] view plaincopymyTimer [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:selector(scrollTimer) userInfo:nil repeats:NO]; //不重复,只调用一次。timer运行一次就会自动停止运行 重复调用计时器方法&…

灰鸽子病毒手工清除方法

灰鸽子病毒手工清除方法[多图] www.rising.com.cn 2005-2-1 9:50:00 信息源:瑞星公司 作者:刘明星 广告 灰鸽子(Backdoor.Huigezi)作者现在还没有停止对灰鸽子的开发,再加上有些人为了避开杀毒软件的查杀故意给灰鸽子加上各种不同的壳&a…

IOS重力感应

iPhone和iPad设备有4个方向的状态,我们可以针对应用当前所处的方向调整界面。 为了使应用支持不同的方向,首先我们需要在项目设置中设置设备支持的方向(也可以在项目的plist中设置) Portrait  竖放,home键在屏幕下方…

理解CSS3 max/min-content及fit-content等width值

1. CSS2.1的尺寸体系 在CSS2.1的世界中,常见的尺寸分为这几类: 2.1 充分利用可用空间。例如,一些div元素默认宽度100%父元素,这种充分利用可用空间的行为就称为“fill-available”。 2.2 收缩与包裹。典型代表就是浮动&#xf…

Vue中实现数据列表无缝轮播

实现效果: 链接 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>vue.js动态文字滚动公告代码</title><script src"https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js">…

接触VC之四:COM组件模型基础

From: http://daimajishu.iteye.com/blog/1081292 一年又一年&#xff0c;已经又过了一年了。我VC的生涯已经两岁了。可以相当地庆贺一下哟。回顾这一年的学习(唉&#xff0c;还没有工作实践呢。这年头&#xff0c;工作不好找哇。),还学了不少的好东西。其中&#xff0c;最重要…

word-break:break-all和word-wrap:break-word的区别

1. CSS的学习&#xff0c;就我个人看来&#xff0c;是有别于JavaScript这张传统程序语言的学习的。本身属性就多&#xff0c;值也多&#xff0c;不同属性在一起表现也不一样&#xff0c;不同属性和不同类型的HTML标签在一起又不一样&#xff0c;再加上兼容性差异和未定义行为。…

2009年上半年网络工程师考试下午试卷参考答案(二)

试题四&#xff08;共15分&#xff09;阅读以下说明&#xff0c;回答问题1至问题4&#xff0c;将解答填入答题纸对应的解答栏内。【说明】某公司总部和分支机构的网络配置如图4-1所示。在路由器R1和R2上配置IPSec安全策略&#xff0c;实现分支机构和总部的安全通信。图4-1【问题…

CSS深入理解vertical-align和line-height的基友关系

1. vertical-align 众所周知&#xff0c;vertical-align支持很多属性值&#xff0c;足足可以组成一个足球队了&#xff1a; 其中&#xff0c;有个属性值暴露了vertical-align和line-height之间的基友关系&#xff0c;大家猜猜看是哪个属性值&#xff1f;哇塞&#xff0c;好厉害…

解决html2canvas截取页面部分div黑屏问题

当截取页面的部分div时出现上述问题 原因&#xff1a; 当转存图片格式为jpeg时截取整个页面(document.body)没有问题&#xff0c;但截取部分div会有黑屏 将jpeg改为png时图片可正常显示。