![]() |
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
CSS设计网页小技巧:100%的高度 | |||
2010-4-9 9:03:51 文/佚名 出处:网页教学网 | |||
在前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现,但是,我想出了一个我个人比较喜欢的方法。今天,我将于你分享一下。
我对你是不了解的,但我试图弄明白如何让我的布局垂直拉伸到页面的100%高度,这样一个令我沮丧的问题。我想让div结构自动延伸,但是它就是不能自动延伸,现在,为什么他不能这样那?今天我将与你一起分享这个解决方法。 Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
body { margin: 0; padding: 0;}#content { background: #EEE; border-left: 1px solid #000; border-right: 1px solid #000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; height: 100%;}
让我给你另外一种方式来思考HTML,几乎每一个HTML文件都有一组容器彼此包含的。因此,在我们的页面里面,首先我们有一个容器,其次容器包含在里,最后才是 容器包含在里面。当我们往任何一个容器里面放置内容的时候,这个容器和包含此容器的父容器盒子都会自动延伸的,从而能容下这些新添加的内容。也就是说,当我们往
当我们给 容器定义“height:100%”样式时,我们现在做的就是告诉它让其高度延伸到包含它的父容器的整个高度。在这个例子里,这个div容器被包含在容器里面,所以
解决此问题,我需要告诉容器变的大一些儿,同时容器也会出现同样的问题,它应该与一样大。所以为了解决这个问题(让 容器自动延伸到整个页面的高度)我们需要告诉和容器高度应为整个页面的高度。 html { min-height: 100%; _height:100%;}body { margin: 0; padding: 0; min-height: 100%; _height:100%;}#content { background: #EEE; border-left: 1px solid #000; border-right: 1px solid #000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; min-height: 100%; _height:100%;}
|
|||
最新热点 | 最新推荐 | 相关文章 | ||
CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程:CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见? CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |