网站制作知识点：关于嵌套DIV的高度自适应

2021-07-18 分类：网站制作

对于很多做网站的新手朋友来说，学习DIV+CSS应该是必不可少的。笔者在论坛以及QQ群里面看到很多朋友在问嵌套DIV的很多问题，比如嵌套DIV 高度自适应，也看过很多这样的解决方法，今天说两个最最简单的实现方法。

1，底层DIV实现嵌套DIV的高度自适应

很多时候，我们在网站制作的时候，需要在一个DIV里面嵌入子DIV，子DIV的高度往往会因为内容的增多变大，这个时候需要外面的DIV随着子DIV的高度变化而变化。很多新手朋友在网上问父层DIV没有被id为sub的里层子DIV撑高，整体样式出现严重的走样效果。一个简便的处理方法是，我们可以在最后一个子层DIV结束之后加上一个宽度与父DIV相同，高度为0像素或者根据自己的需要的一个合适高度的DIV，且该DIV不允许两边有浮动对象，这样我们的网站制作就能实现外部的DIV的高度自动的适应内部的DIV的高度了。

第二种：只需给外层div加个overflow:auto;就可以了

这种方法其实是最简单的，我们只需要给外面的DIV设置一个OVERFLOW属性AUTO就可以了。overflow 为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。使用DW来进行网站制作的朋友可以在选中外面的DIV在其CSS属性中，找到定位，然后设置overflow为AUTO就可以了。

以上的方法最简单，而且兼容绝大部分的浏览器，这样我们网站建设的新朋友，就解决了这个问题，基本上不需为使用JS代码来实现这种功能发愁了。

本文由成都创新互联科技有限公司（www.cdcxhl.com）原创编辑转载请注明。

当前标题：网站制作知识点：关于嵌套DIV的高度自适应
标题网址：https://www.cdcxhl.com/news10/119760.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容