css height:100%失效
程序员文章站
2022-03-02 18:29:37
...
有时做移动端页面时,有需要用到height:100%来控制的,但是设置完后有时候会发现,用百分比的高是不生效的。
经过在网上查找方案,原来是:要看是否可以使用百分比是根据父级对象定义的。
所以解决方法就是在body和html,加上height:100%;就可以了。下面看代码。
html,body{
height:100%;
}
.height{
height:50%;
}
<div class="height">高度百分比</div>
这样问题就解决了。这点虽然简单但是经常会被忽略,列出来已引自己的重视。
推荐阅读
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
使用了min-height后出现了问题_html/css_WEB-ITnose
-
IE下table设置高度100%却无效的情况_html/css_WEB-ITnose
-
a标签点击跳转失效IE6、7的奇葩bug_html/css_WEB-ITnose
-
Border-radius 50% vs 100%_html/css_WEB-ITnose
-
IE6右浮动与margin-right无效(100分悬赏)_html/css_WEB-ITnose
-
css怎么设置宽为100vw
-
font和line-height之CSS代码书写顺序不同,导致显示效果不一样
-
编写html5时调试发现脚本php等网页js、css等失效
-
编写html5时调试发现脚本php等网页js、css等失效