在前端人员之间有一个普遍存在的问题,如何让一个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%;}
|