首页前端开发CSScss怎么让高度自适应

css怎么让高度自适应

时间2024-01-27 22:45:02发布访客分类CSS浏览229
导读:收集整理的这篇文章主要介绍了css怎么让高度自适应,觉得挺不错的,现在分享给大家,也给大家做个参考。css让高度自适应的方法:1、把父层高度设置成“height:auto;”样式属性;2、给添加父层添加“overflow:hidden;”样...
收集整理的这篇文章主要介绍了css怎么让高度自适应,觉得挺不错的,现在分享给大家,也给大家做个参考。

css让高度自适应的方法:1、把父层高度设置成“height:auto; ”样式属性;2、给添加父层添加“overflow:hidden; ”样式属性,然后新建一个div放在后面,并添加样式属性“clear:both”即可。

本文操作环境:windows7系统、HTML5& & CSS3& & hbuilderx v2.1.3.20190723版、Dell G3电脑。

打开网页开发工具,新建一个HTML文件(这里为了方便给大家演示)

普通布局:只需要把外层高度设置成:height: auto; 属性即可自适应:

方法二(浮动布局):

如果子元素设置浮动float属性后,外层DIV是不能够自动被撑开的,如图所示:

解决方法一:给添加父层添加:overflow: hidden; 属性

解决方法二:新建一个div放在后面,并添加样式:clear: both;

【推荐学习:css视频教程】

以上就是css怎么让高度自适应的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: CSS如何设置html table表格边框样...下一篇:十一款学CSS小游戏你知道几个猜你在找的CSS相关文章 css怎么控制按钮不可用2022-05-17css3中transform属性实现的4种功能2022-04-13纯CSS3实现div按照顺序出入效果2022-04-13CSS实现隐藏搜索框功能(动画正反向序列)2022-04-13使用CSS3实现按钮悬停闪烁动态特效代码2022-04-13CSS3 Tab动画实例之背景切换动态效果2022-04-13CSS实现两列布局的N种方法2022-04-13CSS 实现Chrome标签栏的技巧2022-04-13css实现两栏布局左侧固定宽右侧自适应的多种方法2022-04-13从QQtabBar看css命名规范BEM的详细介绍2022-04-13 其他相关热搜词更多phpjavapython

若转载请注明出处: css怎么让高度自适应
本文地址: https://pptw.com/jishu/588817.html
css怎么改行内元素高度 如何使用内嵌式引入css样式表

游客 回复需填写必要信息