div布局的自由伸展三栏式版面的代码

自由伸展的三栏式版面

自由伸展的三栏式版面（Three Column Stretch）（页首）

#leftbox {
position: absolute;
left: 10px;
width: 180px(150px?);
}

这个栏段的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。

这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的"宽度(width)"值。

测试用连结

#rightbox {
position: absolute;
right: 2%;
width: 30%;
}

这个栏段也能显示"body"的背景，但是因为"body"的背景
图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是"body"的背景颜色(background-color)。
这个栏段的"宽度(width)"和右边界的区域是用百分比作单位，你想用其它单位也可以。

如果页面比 640px 还窄，中间和右边栏段使用的"pre"卷标会导致内容重叠。

测试用连结

返回 p.i.e.

#middlebox {
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}

中间栏段有设定背景色，以便跟右边栏段作区分。
这个栏段也需要补白(padding)和边框(border)，不过因为没有设定"宽度(width)"属性，并不会触发 IE5.x 的区块模块(box model)问题。

这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则"body"的背景就会在页尾(footer)下方出现。

这整个范例没有在任何栏段里宣告"高度(height)"属性，这是为了避掉一些浏览器表现"高度(height)"属性的独特方式。
因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。

页首、页尾和中间栏段是"固定的(static)"（或说"相对的(relative)"），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定"高度(height)"。

在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后，
因此这些 div 的"top"属性可以忽略。
这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。
所以如果页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？

Mozilla 中，因为垂直方向的舍入误差(rounding error)，在某些分辨率里，页尾下方可能有 1px 的空隙，
这个范例描述得更详细。

Nav4 中没办法使用像"div#leftbox"这类语法，所以请用"#leftbox"来代替。我的写法只是为了要明确地表示。

致谢：再次感谢Philippe Wittenbergh
，因为他的帮忙，让这个范例更为完善。更感谢
Mark Howells
，因为他提供了最初的 body 背景点子。

Big John

e-mail
©positioniseverything

最后更新日期： September 6, 2002

Created August 24, 2002

繁体中文翻译：yyhuang

简体中文转换:

onestab

以下是填满栏段用的

Why don't cannibals eat clowns?

Answer: They taste funny.

What is the difference between a lousy golfer and a lousy skydiver?

Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP!

Did you hear about the geneticist that tried to cross a potato and a chicken?

He wanted to produce a chicken that would definitely NOT cross the road, but instead,
got a bunch of potatoes that sat around pecking eachother's eyes out.

How many Psychiatrists does it take to change a light bulb?

Answer: Only one, but the bulb has to really want to change.

Why did the egg cross the road?

Answer: It had an inclination.

自由伸展的三栏式版面（Three Column Stretch）（页尾）

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 用Javascript 编写可以缓慢弹出收缩的层

    代码如下: 层的扩展与收缩 function StretchDiv(divid,color){ var target; var flag=false; var onMouseDown=function(){ if(flag){ var h=parseInt(target.style.height); onMouseDown.shortDiv=function(){ h=h-1; if(h200){ return; } target.style.height=h+"px"; setTim

  • 利用JQuery动画制作滑动菜单项效果实现步骤及代码

    利用JQuery动画制作滑动菜单项效果实现步骤及代码

    效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字. 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除), 使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子. 代码如下: 复制代码 代码如下: $(function () { var webNav = { val: { target: 0

  • jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    功能很实用,代码非常的简单 效果1. 效果2. 样式代码如下: 复制代码 代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 } a{ text-decoration:none; color:#515050 } a:hover{ text-decorat

  • js iframe网站后台左右收缩型页面脚本

    mobaihuo网站后台免费提供_我们_www.jb51.net .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .a2{BACKGROUND-COLOR: A4B6D7;} mobaihuo网站后台免费提供 if(self!=top){top.location=self.location;} function switchSysBar(){ if (switchPoint.innerTe

  • jQuery 淡入淡出、展开收缩菜单实现代码

    jQuery 淡入淡出、展开收缩菜单实现代码

    效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo

  • javascript 仿QQ滑动菜单效果代码

    [程序源码] 复制代码 代码如下: var QQ = function() { // 公用函数 function T$(id) { return document.getElementById(id); } function T$$(root, tag) { return (root || document).getElementsByTagName(tag); } function $extend(des, src) { for(var p in src) { des[p] = src[p];

  • JavaScript设置FieldSet展开与收缩

    JavaScript方法代码: 复制代码 代码如下: // 设置FieldSet高度方法,支持IE浏览器.Firefox // 参数1:pTableID,FieldSet内部div或table的id // 参数2:pFieldSetID,FieldSet的ID // 参数3:pImageID,图片的ID,展开或收缩后更新图片SRC function FieldSetVisual( pTableID, pFieldSetID, pImageID ) { var objTable = documen

  • div布局的自由伸展三栏式版面的代码

    自由伸展的三栏式版面 自由伸展的三栏式版面(Three Column Stretch)(页首) #leftbox { position: absolute; left: 10px; width: 180px(150px?); } 这个栏段的背景是利用 body 卷标设定的图片,以垂直方向重复贴上所产生的.图片的宽度和中间栏段的左边界(margin)相等,高度为20px,这样可以减少图片重复的次数,加快演算上色的速度. 这一栏的内容(#leftbox)以绝对位置(absolutely positi

  • 脚本控制三行三列自适应高度DIV布局

    这个例子是用JS脚本控制并列DIV的高度,通常在DIV布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图.外套DIV.右栏覆盖左栏......来解决.现在加了脚本后,简单多了,假如有三个水平并列的DIV,fbox.mbox. sbox,只要在<body>标签中写入:onload="P7_equalCols('fbox','mbox','sbox')",测试条件:ie5.x.ie6.0.FF1.03.NS7.2.opera8.01.最终效果. JS代码:版权归原作者 

  • vue.js通过路由实现经典的三栏布局实例代码

    vue.js通过路由实现经典的三栏布局实例代码

    经典的三栏布局效果图如下: 三栏布局 •将布局的各个区块定义成组件 <template id="header"> <div class="header bg-primary text-center"> <h3>头部区域</h3> </div> </template> <template id="left"> <div class="left bg-

  • 用CSS floats创建三栏页布局

    三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法.用绝对定位的方法从

  • 脚本控制三行三列自适应高度DIV布局的代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><

  • element中el-container容器与div布局区分详解

    用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器.当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列. el-header:顶栏容器. el-aside:侧边栏容器. el-main:主要区域容器. el-footer:底栏容器. 以上组件采用了 flex 布局,elemen-ui官方文档链接: http://element-cn.eleme.io/#/zh-CN/component/container 此外,el-container 的子元

  • Java Swing组件布局管理器之FlowLayout（流式布局）入门教程

    Java Swing组件布局管理器之FlowLayout（流式布局）入门教程

    本文实例讲述了Java Swing组件布局管理器之FlowLayout(流式布局).分享给大家供大家参考,具体如下: FlowLayout应该是Swing布局管理器学习中最简单.最基础的一个.所谓流式,就是内部控件像水流一样,从前到后按顺序水平排列,直到达到容器的宽度时跳转到第二行.既然是水平排列,那么就存在三种基本的对齐方式:居中对齐(CENTER ).左对齐(LEFT )和右对齐(RIGHT ).然而,FlowLayout还提供两种对齐方式:LEADING,表示控件与容器方向开始边对应:TR

  • js防止DIV布局滚动时闪动的解决方法

    本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考.具体方法如下: 最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染.资料非常多,所以选一些做节译,备忘. JavaScript多次写.读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree 复制代码 代码如下: from a DOM tree1). // 读 var h1 = element1.clientHeight; /

  • 微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi

  • Android自定义顶部导航栏控件实例代码

    下面一段代码给大家介绍了android 自定义顶部导航栏控件功能,具体代码如下所示: class HeaderBar @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : FrameLayout(context, attrs, defStyleAttr) { //重写构造方法 在java里面 我们一般是重写三个构造方法//在kotlin中 我们可以使用

随机推荐