htmlcss自适应高度解决方法

私信我或关注狮范儿，回复：学习，获取免费学习资源包。

演示效果图：

1、全屏前

2、全屏后

html代码：

<div class="container"> <p><em>单击下面的按钮将元素输入全屏模式</em></p> <div class="element" id="element"><p>我在全屏模式下改变颜色！</p></div> <br /> <button onclick="var el = document.getElementById('element'); el.requestFullscreen();"> 全屏! </button> </div>

css代码：

.container { margin: 40px auto; max-width: 700px; } .element { padding: 20px; height: 300px; width: 100%; background-color: skyblue; } .element p { text-align: center; color: white; font-size: 3em; } .element:-ms-fullscreen p { visibility: visible; } .element:fullscreen { background-color: #e4708a; width: 100vw; height: 100vh; }

来源网络，侵权联系删除

私信我或关注狮范儿，回复：学习，获取免费学习资源包。