html - css如何让元素满屏
本文介绍了html - css如何让元素满屏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<body>
<div id="main">
<div id="ch"></div>
</div>
</body>我是想让main的高度等于浏览器的高度，如果ch的高度大于浏览器高度时main的高度也能随之变大，我现在的实现是这样的
#mian{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#ch{
width: 50px;
height: 2000px;
}我将ch设为2000高，此时发现ch撑开了main，main的高度比ch小，按照我的预期如果ch小于浏览器高度时main的高度为浏览器高度，如果ch的高度大于浏览器高度则main的高度为ch的高度，请问该怎么实现？
补充一下:
如上图所示，3的高度可能比页面要小，如果小时希望2的高度等于页面高度，3的高度也可能比页面要大，这时就希望2的高度与3保持一致
解决方案
如果理解没错的话，你的需要效果可以用实现为：
#main {
position: absolute;
top: 0;
/* bottom: 0; */
left: 0;
right: 0;
min-height: 100vh; // 或 100%
background: rebeccapurple;
}'#ch' 不变
这篇关于html - css如何让元素满屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
