这篇文章将为大家详细讲解有关怎么在HTML5中设置body自适应全屏,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
html,body{ width:100%; height:100%}
body{ font-family: "华文细黑"; background:url("../img/Flyer-bg.png") no-repeat; background-size: 100%;}
一个hack方案解决垂直剧中问题
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,minimum-scale=1.0"> <title>缓存</title> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/store.min.js"></script> <style> .parent{ width:200px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #aaa; } </style></head><body> <div class="parent">111</div></body>
其他方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%"> <img src="https://file.lsjlt.com/upload/202306/07/e54p3pz3squ.jpg" width="100%" height="100%"/> </body></html>
清除浮动
.float-left { float: left;}.float-right { float: right;}.clear-fix:after { display: table; content: ''; clear: both;}
关于怎么在HTML5中设置body自适应全屏就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。