问题:在微信小程序中使用height:calc(xx - xx)设置元素高度无效
创新互联建站从2013年创立,是专业互联网技术服务公司,拥有项目成都做网站、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元都兰做网站,已为上家服务,为都兰各地企业和个人服务,联系电话:13518219792
排查原因:calc属性设置height或width时,要求父容器有明确的对应属性设置,当父容器没有设置时,calc计算无法完成。因为我想设置高度的元素没有父容器,所以calc失效。
解决办法:1.给该元素添加设置明确高度的父容器。2.直接通过page{height:100%;}解决。
重新刷新下,可能是网络原因导致css没刷新出来,或者是由于网站更新了样式,你这边有缓存,所以刷不出css样式,清除下微信缓存,重新访问
用js判断是不是微信浏览器打开,若是则采用对应css样式;不是就用默认css样式即可;具体代码网上一堆,一搜既有的东西。
html
head
!--下面是css文件链接--
link href="css/style.css" rel="stylesheet" id="cssLink" /
/head
body
script type="text/javascript"
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (!isWeixin) {
var obj=document.getElementById("cssLink");
obj.setAttribute("href","css/css.css");//不是微信使用的css文件
}else{
var obj=document.getElementById("cssLink");
obj.setAttribute("href","css/style.css");//是微信使用的css文件
}
/script
!--下面div用来测试--
div class="div"/div
/body
/html
调试器打开,有个wxml栏,点一下,显示页面元素,然后选择自己想调试的元素,或者直接点最左边的箭头,选择页面元素