容器高度100%的绝对定位布局

容器高度100%是经常用到的需求，任何容器都可以实现，而且不需要嵌套关系。

把body看作是一个容器，做为内部对象的上层标签，他的高度设置为100%是关键。

最基本的例子

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* 同时设置html是为了兼容FF */
#box_2 { height:100%; background:#000;}

重叠定位效果

#box_1 { position:absolute; top:0; left:0; width:100%; height:50px; background:#f00; z-index:2;}
#box_2 { position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:1;}

纵向相对高度效果

#box_1 { position:absolute; top:0; left:0; width:100%; height:30%; background:#f00; z-index:2;}
#box_2 { position:absolute; left:0; top:30%; width:100%; height:70%; background:#000; z-index:1;}

横向相对宽度效果

#box_1 { position:absolute; top:0; left:0; width:30%; height:100%; background:#f00; z-index:2;}
#box_2 { position:absolute; top:0; right:0; width:70%; height:100%; background:#000; z-index:1;}

这种布局是不需要float的，还可以有很多变化：

1，N列布局
2，N行布局
3，N列加N行交叉布局

值得注意的是在FF下浏览相对大小容器页面时，调整窗口大小的同时容器大小进行实时调整，而IE只会在窗口调整完毕后才出效果。

IE5.0 / IE5.5 / IE6.0和FF1.5测试通过

赞 (0)

相关推荐

  • 容器高度100%的绝对定位布局

    容器高度100%是经常用到的需求,任何容器都可以实现,而且不需要嵌套关系. 把body看作是一个容器,做为内部对象的上层标签,他的高度设置为100%是关键. 最基本的例子 * { margin:0; padding:0; border:0;}html,body { height:100%;} /* 同时设置html是为了兼容FF */#box_2 { height:100%; background:#000;} 重叠定位效果 #box_1 { position:absolute; top:0;

  • jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)

    瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一般三四个)UL分布放置LI: 2.AJAX不一样 绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了.然后再对这个新插入的LI进行TOP和LEFT设置: 浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置.会自动向下排列: 一.功能分析: 1.定位每一个L

  • vue单页面如何设置高度100%全屏

    vue单页面如何设置高度100%全屏

    目录 单页面设置高度100%全屏 高度设置100%无效 单页面设置高度100%全屏 很多时候我们给单页面设置高度100%永远不会全屏 效果图 高度都是靠内容撑起来的 解决很简单 创建一个css html, body, #app{ height: 100%; margin: 0; padding: 0;} 然后引入全局 (引入到min.js) 现在看效果 高度设置100%无效 场景:当单页面需要整个页面填充颜色等操作,需要页面高度为屏幕高度,设置height:100%无效 解决方法:在App.vu

  • 一篇文章带你了解Java容器,面板及四大布局管理器应用

    一篇文章带你了解Java容器,面板及四大布局管理器应用

    目录 什么是容器? 什么是面板? JPanel面板 JScrollPane面板 什么是布局管理器? 绝对布局管理器 流布局管理器 边界布局管理 网格布局管理器 容器.面板.布局管理器之间的关系 总结 什么是容器? 在Java的GUI界面设计中,关于容器的理解,从字面意思我们就可以认为它是存放控件的地方,而这个地方依托在窗体之上,常用的容器是container. 而关于container容器我们应该有这样的认识:Swing组件中的窗体通常是与容器相关联的,所以在一般情况下,建立完JFrame窗体后

  • WPF中常用的布局容器介绍

    WPF中常用的布局容器介绍

    目录 一.简介 二.代码案例 1.Border 2.StackPanel 3.WrapPanel 4.DockPanel 5.Grid 6.UniformGrid 7.Canvas 8.ScrollViewer 一.简介 所有的WPF布局容器都派生自System.Windows.Controls.Panel.Panel继承自FrameworkElement. 在Panel中有一个比较重要的属性是UIElementCollection 类型的Children属性,UIElementCollecti

  • Flex 3 布局容器学习笔记 整理

    Flex 3 布局容器学习笔记 整理

    很好的文章Flex3 界面布局教程 (1) http://www.jb51.net/article/20349.htmFlex3 界面布局教程 (2) http://www.jb51.net/article/20350.htmFlex 组件的定位和布局 http://www.adobe.com/cn/devnet/flex/quickstart/layout_modes/ Using Layout Containers http://livedocs.adobe.com/flex/3/html/

  • 脚本控制三行三列自适应高度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代码:版权归原作者 

  • java中容器(顶层容器和中间容器)的布局管理器详解

    目录 java容器(顶层容器和中间容器)的布局管理器 一.布局管理器所属类包 二.容器的默认布局管理器 java常用的四大容器总结 一.为什么要使用容器(集合类)? 二.Java中四大容器的简介与区别 三.Java的容器体系 java容器(顶层容器和中间容器)的布局管理器 Java能够以像素为单位对组件进行精确的定位,但是其在不同的系统中将会有一定的显示差异,使得显示效果不同,为此java提供了布局管理器,使编写的图形界面具有良好的平台无关性. 注意:所有的布局管理器均是针对容器来使用的,包括顶

  • 微信小程序整个页面的自动适应布局的实现

    按比例适应布局 大家有没有过一个烦恼,就是让某个view的高度或者宽度扩大点,而且是要按比例适应不同的手机,遇到这类问题应该怎么办? 下面就为大家讲解怎么做一个能够自动适应不同手机的布局 1.像素单位 rpx 首先,我们来说说像素单位rpx,rpx是官方为小程序出的尺寸单位rpx(responsive pixel),它可以根据屏幕宽度进行自适应.规定屏幕宽度为750rpx.所以平常我们应该尽量使用rpx来代替px 2.容器view的宽高使用百分百的方式 其次,我们来说说容器view的宽高应该尽量

  • WPF常见布局面板用法及介绍

    WPF常见布局面板用法及介绍

    目录 常见的几个布局面板 1.StackPanel面板 2.WarpPanel面板 3.DockPanel面板 5.UniformGrid面板 6.Canvas面板 常见的几个布局面板 1.StackPanel面板 StackPanel面板能够简单根据单行或者单列进行元素排列, StackPanel 默认的布局方向为垂直方向(Vertical), 由Orientation属性控制. Orientation属性: 用户控制布局方向是垂直还是横向排列.分别有两个值可选:Vertical.Horizo

随机推荐