>>
知识广场
CSS中设置height:100%无效的原因分析和解决方法
导读:
我们知道在把盒子宽度自适应为浏览器窗口宽度,只需设置width:100%就可轻松解决问题,但是让盒子的高度自适应浏览窗口的高度并非那么容易,下面举个例子:代码如下:<!-- 高度实际为字体大小 …
我们知道在把盒子宽度自适应为浏览器窗口宽度,只需设置width:100%就可轻松解决问题,但是让盒子的高度自适应浏览窗口的高度并非那么容易,下面举个例子:
代码如下:
<!-- 高度实际为字体大小 -->
<div class="box" style="width:100%;height:100%;background-color:red;">
width:100%;height:100%;
</div>
输出结果:
解决方法一:设置父元素高度
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
备注:vue或者react等可以通过开发者模式查看当前父元素是谁
解决方法二:不用设置父元素高度,通过设置定位(fixed或absolute)解决
.box {
/* position: fixed; */
position: absolute;
top: 0;
left: 0;
}
在使用height: 100%;时需要注意的一些事项
margin 和 padding 会让你的页面出现滚动条,也许这是你不希望的。
如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。
相关推荐
PHP json_decode()报错 json_last_error()判断错误类型及解决方法
PHP json_decode()报错 json_last_error()判断错误类型 解决背景:最近在用curl请求接口获取json数据串的时候,一直出现PHP中json_decode()解析字符串…
2022-10-29 21:45:57 | 分类:PHP | 作者:myerob | 阅读:620 | 标签:PHP json_decode() 报错 json_last_error() 判断错误类型 解决方法 | 收藏
CSS中设置height:100%无效的原因分析和解决方法
我们知道在把盒子宽度自适应为浏览器窗口宽度,只需设置width:100%就可轻松解决问题,但是让盒子的高度自适应浏览窗口的高度并非那么容易,下面举个例子:代码如下:<!-- 高度实际为字体大小 …
2022-10-30 12:24:34 | 分类:HTML,CSS | 作者:myerob | 阅读:1859 | 标签:CSS 设置 height:100% 无效 原因分析 解决方法 | 收藏
- 阅读榜
- 1. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 2. 主席令13届第89号《中华人民共和国印花税法》
- 3. linux主机ssh命令来查看某一端口是否开放
- 4. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 5. 记录一个非常实用的前端拖拽插件interact.js(JS前端开发)
- 6. 离职员工申报个税删不掉 显示存在收入明细,若该人员已离职或退休,请将人员状态改为非正常。可改为非正常后还是不行
- 7. 总结那些常用的excel函数公式大全
- 8. h3c交换机乱码怎么弄(h3c 配置备份报错)如何修改交换机字符集?
- 9. php页面最大执行时间 set_time_limit函数不起作用
- 10. JS实现可控制左右方向的无缝滚动效果代码分享