如何让 div 铺满整个屏幕

以你之姓@ 2023-02-23 08:51 263阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70][]

<style>
        * {margin: 0;padding: 0;}
        .f {
            width: 80%;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
        .s {
            width: 80%;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
    <div class="f">
        <div class="s"></div>
    </div>
    <script>
        const body = document.querySelector('body');
        const father = document.querySelector('.f');
        const son = document.querySelector('.s');
        window.onresize = function(){
            console.log(body.clientWidth, father.clientWidth, son.clientWidth)
        }
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 1][]

<style>
        * {margin:0;padding:0;}
        html, body {
            width: 100%;
            height: 100%;
        }
        .main {
            width: 100%;
            height: 100%;
            background-color: #889AA4;
        }
    </style>
    <div class="main"></div>

<style>
        * {margin:0;padding:0;}
        .main {
            /*position: fixed;*/
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #889AA4;
        }
    </style>
    <div class="main"></div>

<style>
        * {margin:0;padding:0;}
        .main {
            /*position: fixed;*/
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #889AA4;
        }
    </style>
    <div class="main"></div>

> js

<style>
        * {margin: 0;padding: 0;}
        #bg {
            background-color: #889AA4;
        }
    </style>
    <div id="bg"></div>
    <script>
        let resize = function (){
            const bg = document.querySelector('#bg');
            const height = document.documentElement.clientHeight;
            bg.style.height = height + 'px'
        }
        resize()
        window.onresize = function(){
            resize()
        }
    </script>

>  *  [https://www.jianshu.com/p/ef1582794a79][https_www.jianshu.com_p_ef1582794a79]
>  *  [https://blog.csdn.net/qq\_39174924/article/details/103420766][https_blog.csdn.net_qq_39174924_article_details_103420766]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200708093429287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200706211357317.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz,size_16,color_FFFFFF,t_70
[https_www.jianshu.com_p_ef1582794a79]: https://www.jianshu.com/p/ef1582794a79
[https_blog.csdn.net_qq_39174924_article_details_103420766]: https://blog.csdn.net/qq_39174924/article/details/103420766

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3项目中如何一个vue组件中的一个div里面的图片铺满整个屏幕样式如何设置

在Vue 3项目中，要使一个divdiv元素和图片元素的样式设置正确，以及确保它们能够覆盖整个视口（viewport）。以下是一个简单的步骤和代码示例，帮助你实现这一目标。

谁借莪１个温暖的怀抱￠/ 2024年04月29日 00:41/ 0 赞/ 64 阅读

相关如何让 div 铺满整个屏幕

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

以你之姓@/ 2023年02月23日 08:51/ 0 赞/ 264 阅读

相关 VUE项目学习笔记：页面无法铺满整个屏幕

VUE项目学习笔记：页面无法铺满整个屏幕 1、出现的问题在VUE初始项目运行后，页面整体无法铺满整个屏幕，如下图所示![在这里插入图片描述][watermark_

妖狐艹你老母/ 2023年01月05日 12:26/ 0 赞/ 1240 阅读

相关 html页面撑满整屏幕,让div撑满整个屏幕的方法（css）

这篇文章主要介绍了关于让div撑满整个屏幕的方法(css)，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在body只有一个p的时候，可以通过这样的方式让p撑

╰+哭是因爲堅強的太久メ/ 2022年10月06日 11:44/ 0 赞/ 1050 阅读

相关 el-aside无法铺满屏幕

第一步：在App.vue中写入样式 <style scoped> app { position: absolute; top: 0;

小灰灰/ 2022年10月05日 14:45/ 0 赞/ 202 阅读

相关让body、Div占满整个浏览器的窗口

今天在研究百度首页的时候，发现内部的div总是能铺满整个窗口，这对于我们自适应页面制作是非常有帮助的。仔细查看之后，发现是因为设置了： html,body{

桃扇骨/ 2022年09月25日 09:18/ 0 赞/ 210 阅读

相关 css中让图片铺满整个div盒子

盒子是middle middle{ border: 1px solid blue; position: absolute;

淩亂°似流年/ 2022年05月14日 02:12/ 0 赞/ 776 阅读

相关如何让背景图片平铺满整个浏览器页面

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

爱被打了一巴掌/ 2022年04月13日 09:21/ 0 赞/ 397 阅读

相关 html5绘图铺满整个屏幕

<DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>绘图示列</titl

秒速五厘米/ 2022年03月12日 03:41/ 0 赞/ 247 阅读

相关铺满全屏的div

继承法 <style> { margin:0; padding:0; }

秒速五厘米/ 2021年12月17日 05:21/ 0 赞/ 316 阅读