设置div全屏

最新推荐文章于 2024-04-20 18:01:19 发布

weixin_38168322

最新推荐文章于 2024-04-20 18:01:19 发布

阅读量576

点赞数

原文链接：http://www.cnblogs.com/masha2017/p/11338565.html

版权

如何设置div的高度是body的高度的100%

如果直接设置div的高度为100%，那么是没有效果的，如下图所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <div style="width: 100%;height: 100%; background: red;">111<div>
    </body>
</html>

效果如下图所示，是没有效果的

原因是body的高度是默认为auto的，所以只要设置body的高度为100%，就能设置div全屏了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body{
                height: 100%;
                padding: 0px;
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <div style="width: 100%;height: 100%; background: red;">111<div>
    </body>
</html>

注意：一定要设置html和body,不能只设置body,否则也是没效果的。

设置完成后就有效果了

参考：https://zhidao.baidu.com/question/196792199.html

转载于:https://www.cnblogs.com/masha2017/p/11338565.html

weixin_38168322

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
设置div全屏

如何设置div的高度是body的高度的100%如果直接设置div的高度为100%，那么是没有效果的，如下图所示：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...
复制链接

扫一扫