min-height和height的区别

height：给元素指定高度，一旦元素的内容超出这个高度就会溢出
min-height：给元素设置最小高度，当内容少的时候，元素是这个高度，当内容超出时，元素高度会自动适应内容，不会出现内容溢出情况。

问题：
父元素设置min-height后，子元素设置height：100%无效
父元素设置height后，子元素设置height：100%有效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{min-height: 500px;border: 1px solid red;;}.p1{background-color: green;height: 100%;display: inline-block;}.p2{background-color: blue;display: inline-block;height: 100%;}</style>
</head>
<body><div class="div1"><div class="p1">111111</div><div class="p2">222222</div></div>
</body>
</html>

min-height和height的区别相关推荐

[css] body{height:100%}和html,body{height:100%}有什么区别？为什么html要设置height:100%呢，html不就是整个窗口吗？
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...
关于height和min-height的区别
height:给元素指定高度,当元素较少的时候保持设置的高度,当元素较多时元素溢出. min-height:给元素设置最小高度,当元素较少时保持设置高度,元素较多时自适应. 父元素设置min-heig ...
height和line-height的区别（简单易懂）
height:指定区域的高度 line-height:一行的高度,简称行高. 行高:两行文字之间基线的距离 1.height和line-height值相同的情况实例解释: height定义了一个盒子 ...
height和line-height的区别
height:表示行高 line-height:表示每行文字所占的高度下面举例子你就会明白: 第一种情况:使用height 运行结果: 第二种情况:行高为50px和文字高度为20px情况:这时候文字 ...
css height 100% 和 100vh 区别
1. height 100% 意思就是,想在这container设置高度! [有约束] 高度设置成 100% 但是呢这得看 container的父级 body的height是否为100% 还往上看bo ...
@Size、@Length、@Max、@Min注解的含义和区别
POM引入依赖: <dependency><groupId>javax.validation</groupId><artifactId>validati ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
关于height:100%和height:100vh的区别
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置height ...
height:100%和height:100vh的区别
(1)vh (视口高度)和 vw(视口宽度)介绍 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 效果: 当元素没有内容时候,设置height:10 ...

min-height和height的区别

min-height和height的区别相关推荐

最新文章

热门文章