如何让元素高度满屏，这是个问题？
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p></p>
</div>
<style>
html{
height: 100%;
}
body{
border: red dotted 2px;
min-height: 100%;
}
div{
border: blue dotted 2px;
height: 100%;//想让该元素高度满屏
}
p{
border: 2px dotted blueviolet;
height: 300px;
}
</style>
</body>
</html>
希望div元素高度满屏，但是他总是和p元素几乎一样高？？那如何让用css使其高度满屏呢？
点击查看效果：https://jsfiddle.net/7x1L08ht/
幕布斯7119047浏览 569回答 1
1回答
-
慕工程0101907
因为百分比永远是相对于一个固定值来说的，你现在这个div的100%，它的父亲必须是一个定值，如果它父亲不定的话，那么它爷爷也必须是定的，也就是说，要么你设置body的height为500px，或者html为500px，否则这个div的百分比就完全不起作用，因为它不知道该如何计算。你这里实际想表达的是这个div占满整个屏幕高度，那你就不要用100%，直接用height: 100vh就好了。
随时随地看视频慕课网APP
相关分类
JavaScript