javascript - 如何让元素高度满屏，这是个问题？
本文介绍了javascript - 如何让元素高度满屏，这是个问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<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/
解决方案
因为百分比永远是相对于一个固定值来说的，你现在这个div的100%，它的父亲必须是一个定值，如果它父亲不定的话，那么它爷爷也必须是定的，也就是说，要么你设置body的height为500px，或者html为500px，否则这个div的百分比就完全不起作用，因为它不知道该如何计算。你这里实际想表达的是这个div占满整个屏幕高度，那你就不要用100%，直接用height: 100vh就好了。
这篇关于javascript - 如何让元素高度满屏，这是个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
