css自适应浏览器100%高度
在web前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现，但是，我想出了一个我个人比较喜欢的方法。
如下html代码文档
同时你有如下css样式文件
这就给了你这个示例文件。正如你所看到的，页面的content容器不能自动延伸到页面的整个高度。尽管我们给css样式文件添加了”height:100%”。为什么那？
让我给你另外一种方式来思考HTML，几乎每一个HTML文件都有一组容器彼此包含的。因此，在我们的页面里面，首先我们有一个容器，其次容器包含在里，最后才是容器包含在里面。当我们往任何一个容器里面放置内容的时候，这个容器和包含此容器的父容器盒子都会自动延伸的，从而能容下这些新添加的内容。也就是说，当我们往容器盒子添加文字内容的时候，这个div容器盒子是自动延伸的，包含这个div容器的父容器盒子（body与html）依次是自动延伸的。
当我们给容器定义“height:100%”样式时，我们现在做的就是告诉它让其高度延伸到包含它的父容器的整个高度。在这个例子里，这个div容器被包含在容器里面，所以就是body的整个高度。好了，body容器是如何延伸增长的那？它就像的高度一样，因为我们从来没有告诉它如何增高的。所以当我们给定义“height：100%”样式的时候，我们仅仅告诉了它自己。
解决此问题，我需要告诉容器变的大一些儿，同时容器也会出现同样的问题，它应该与一样大。所以为了解决这个问题（让容器自动延伸到整个页面的高度）我们需要告诉和容器高度应为整个页面的高度。
如果我们修改我们的css文件，如下所示
-
用微信 “扫一扫”
将文章分享到朋友圈。
关注公众号:xue-jiqiao
本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！
发表评论：
最新建站教程
猜你也喜欢看这些
