在前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现,但是,我想出了一个我 个人比较喜欢的方法。今天,我将于你分享一下。
我对你是不了解的,但我试图弄明白如何让我的布局垂直拉伸到页面的100%高度,这样一个令我沮丧的问题。我想让div结构自动延伸,但是它就是不 能自动延伸,现在,为什么他不能这样那?今天我将与你一起分享这个解决方法。
比方说你有如下html代码文档
同时你有如下css样式文件
这就给了你这个示例文件 。正如你所看到的,页面的content容器不能自动延伸到页面的整个高度。尽管我们给css样式文 件添加了”height:100%”。为什么那?
让我给你另外一种方式来思考HTML,几乎每一个HTML文件都有一组容器彼此包含的。因此,在我们的页面里面,首先我们有一 个<html>容器,其次<body>容器包含在<html>里,最后才是<div id=”content”></div>容器包含在里面。当我们往任何一个容器里面放置内容的时候,这个容器和包含此容器的父容器盒子 都会自动延伸的,从而能容下这些新添加的内容。也就是说,当我们往<div id=”content”></div>容器盒子添加文字内容的时候,这个div容器盒子是自动延伸的,包含这个div容器的父容器盒 子(body与html)依次是自动延伸的。
当我们给<div id=”content”></div>容器定义“height:100%”样式时,我们现在做的就是告诉它让其高度延伸到包含它的父 容器的整个高度。在这个例子里,这个div容器被包含在<body>容器里面,所以<div id=”content”></div>就是body的整个高度。好了,body容器是如何延伸增长的那?它就像<div id=”content”></div>的高度一样,因为我们从来没有告诉它如何增高的。所以当我们给<div id=”content”></div>定义“height:100%”样式的时候,我们仅仅告诉了它自己。
解决此问题,我需要告诉<body>容器变的大一些儿,同时<html>容器也会出现同样的问题,它应该 与<body>一样大。所以为了解决这个问题(让<div id=”content”></div>容器自动延伸到整个页面的高度)我们需要告诉<html>和<body& gt;容器高度应为整个页面的高度。
如果我们修改我们的css文件,如下所示
就是这样,这里是我们现在的最终效果 。这个content容器现在已经能自动延伸到整个页面的高度了。