CSS中min-height:100%问题

字面意思就是最小高度,高度的百分比继承于父元素大小.在多次嵌套的div中若里层需要使用min-height:100%.则其所有祖先元素都得设置

*{min-height:100%;height: 100%;
}

如下面的实现过程:

<!DOCTYPE HTML>
<html><head><title>test min-height</title></head><style type="text/css">html,body{height: 100%;margin: 0;padding: 0;}.container,.wrap1,.wrap2{min-height: 100%;height: 100%;}.wrap3{min-height: 100%;}</style><body><div class="container"><div class="wrap1"><div class="wrap2"><div class="wrap3"><p>this is the test div</p></div></div></div></div></body>
</html>

只有在父元素高度明确指定的情况下,子元素才能继承父元素的高度,但是min-height是模糊的,不明确的.故最后计算出来的高度往往是"auto"而不是期望的100%,在这个问题中.

当我们把html的高度设置为100%就代表html的大小就是整个页面,即html的高度是确定的.然后是body的100%,继承自html同样高度也是确定的.....这样一直下去,到wrap3时,由于之前的元素高度都是确定的,此时wrap3的min-height自然能起作用.

转载于:https://www.cnblogs.com/Poised-flw/archive/2013/03/19/2999676.html

CSS中min-height:100%问题相关推荐

在CSS中实现height:100%-200px； width:100%-200px,既长度或宽度百分百减去200px
实例: .main{height:calc(100% - 200px)width:calc(100% - 200px) } 注: 1.减号左右必须打空格,否则不生效 2.任何长度值都可以使用calc( ...
css设置height无效,CSS中设置height:100%无效的解决方案
li 前面的缩进怎么去除? 异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 设置margin和padding为0或者为比较小的值就 ...
css如何让height:100%起作用？
原文出处:css如何让height:100%起作用? 当你设置一个元素的高度为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大对数情况下,这样做法没有任何效果,你知道为什么height:100 ...
CSS 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
vue中设置height:100%无效的问题及解决方法
在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效,在App.vue中:<template><div id=" ...
CSS高度自适应 height:100%;
在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果为什么呢? 之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE ht ...
css中调整高度充满_CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
height:100%和height:inherit比较
height:100%和height:inherit 在我的理解中. height: 100%; 是会继承父元素的100%的高度 height: inherit; 是会继承父元素的高度我觉得他们的意 ...
解决css中height:100%失效的问题
解决css中height:100%失效的问题参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...
CSS中height:100vh和height:100%的区别是什么？
CSS中height:100vh和height:100%的区别首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...

CSS中min-height:100%问题

CSS中min-height:100%问题相关推荐

最新文章

热门文章