CSS 相对|绝对(relative/absolute)定位系列(三)

1. absolute与等高布局

拿简单的两栏布局举例,左栏与右栏有不同的背景色,且中间隔边框线分隔,如何实现?因为随着内容的不同,有可能左侧栏高度较高,也有可能是右侧栏高度较高。所以,要实现无缝的填色,定高是行不通的,置高度不理显然也不行,此时解决方法就是让左右两栏等高

我较早的时候写过一篇名为“纯CSS实现侧边栏/分栏高度自动相等”的小tip,其实现原理如下

这里写图片描述

后来在“我所知道的几种display:table-cell的应用”一文中也提过使用display:table-cell实现等高布局

这里再介绍些如何使用absolute实现等高布局

点击demo页面中的两个按钮就可以看到无论左侧栏高还是右侧栏高,两边背景颜色纯纯的,中间的垂直分隔线直直的,如下截图

这里写图片描述

这里写图片描述

其中,实现等高效果的核心CSS代码如下

这里写图片描述

全部代码

这里写图片描述

实现原理就是:首先设置一个红色背景的外层容器,这里包含一左一右两个容器,所以不管是左边还是右边的内容增加都会导致外层容器高度增加,进而导致红色背景层增高。然后我们给左边容器设置一个绿色的背景层,这个背景层宽度和左侧容器等宽,但高度是一个9999em的极高的高度,将其覆盖在红色的背景层之上,所以此时看起来的效果两列等高的一绿一红的等高列

这里写图片描述

这里写图片描述

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

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

相关文章

CPUID详解[增加TLB与Cache]

From: http://bbs.pediy.com/showthread.php?threadid21646 标 题:CPUID详解[增加TLB与Cache]作 者: Pr0Zel 时 间: 2006-02-21,22:00:23 链 接: http://bbs.pediy.com/showthread.php?t21646 这是文章最后一次更新,加入了TLB与Cache信息等资料前言:论坛上面有人不明白CPUID指…

2009年5月软件设计师考前预测试题及考点解析

更多试题及要点解析请参见《软件设计师考试考前冲刺预测试卷及考点解析》、《应试捷径--典型考题解析与考点贯通(系统分析师考试)》,不断更新中,敬请持续关注!

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

一、为何要分栏高度一致? 分栏高度一致的目的是更加美观。举两个例子吧 2.1 对于分栏布局,我们或许会用边框(border)进行分隔,就如鄙人博客的分栏 此时最担心的问题就是高度不一致,尤其是无边框属性的分栏高度超过有边框属性的分…

论调用约定__stdcall,__cdecl,__fastcall,thiscall,naked call

From: http://blog.vckbase.com/arong/archive/2004/06/09/409.aspx 在C语言中,假设我们有这样的一个函数: int function(int a,int b) 调用时只要用result function(1,2)这样的方式就可以使用这个函数。但是,当高级语言被编译成计算机可以…

gitservergitlab之搭建和使用

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

菜鸟学习javascript实例教程

1、用JS显示文字的例子&#xff1a; <html> <body> <script type"text/javascript"> document.write("Hello World!") </script> </body> </html> 2、用HTML标签来格式化文本的例子&#xff1a; <html> <bod…

推荐!国外程序员整理的 C++ 资源大全(转载)

关于 C 框架、库和资源的一些汇总列表&#xff0c;由 fffaraz 发起和维护。 内容包括&#xff1a;标准库、Web应用框架、人工智能、数据库、图片处理、机器学习、日志、代码分析等。 标准库 C标准库&#xff0c;包括了STL容器&#xff0c;算法和函数等。 C Standard Library&am…

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

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

格式化网上复制过来的源代码

背景&#xff1a; 当我们从网上复制一些源代码到本机的时候&#xff0c;一定会带上一些非常规字符(特殊字符)&#xff0c;为了让源代码更规范&#xff0c;我们一般需要作一些处理&#xff1a; 1. 将连续的多个空格、制表符压缩成一个 2. 删除行尾多余的空格或制表符 3. 将每…

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

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

获取硬盘总容量,柱面数,磁道数,扇区数

下面的代码来自MSDN #include <stdio.h> #include <windows.h> #include <winioctl.h>BOOL GetDriveGeometry(DISK_GEOMETRY *pdg) {HANDLE hDevice; // handle to the drive to be examined BOOL bResult; // results flagD…

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

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

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

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

Linux-在linux修改文件夹及其子文件夹的权限

现在这会写一个命令吧&#xff0c;之前命令都忘记了 今天突然用起来 感觉都不会用了 加入-R 参数&#xff0c;就可以将读写权限传递给子文件夹 例如chmod -R 777 /public_html 那么public_html文件夹和它下面的所有子文件夹的属性都变成了777. 777是读、写、执行权限…

灰鸽子病毒手工清除方法

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

IOS重力感应

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