全国服务热线:4008-888-888

技术知识

web器皿怎样自融入视口尺寸

序言

在前端开发职业生涯上,常常会遇到必须器皿自融入视口高宽比这类状况,本文将详细介绍我能想起的处理这个难题的计划方案。

基本专业知识

html元素的高宽比默认设置是auto(被內容全自动撑开),宽度默认设置是100%(等于访问器可视性地区宽度),沒有margin和padding;

body元素的高宽比默认设置是auto,宽度默认设置是100%,有margin而沒有padding;

若想让1个块元素(如div)的高宽比与显示屏高宽比自融入,自始至终填满显示屏,必须从html层刚开始层层加上height=100%,而又由于html,body元素的width默认设置便是100%,因而在里边的div 设置width=100%时就可以和显示屏等宽。

方式1:承继父元素高宽比

给html、body标识加上css特性height=100%,随后在必须撑满高宽比的器皿加上css特性height=100%,以下:

    <html>
        <body>
            <div class="example">
            </div>
        </body>
    <html>
    html{
        height:100%;//让html的高宽比等于显示屏
    }

    body{
        height:100%;
        margin:0;
    }

    .example{
        width: 100%;
        height:100%;
        background:rgb(55, 137, 243);
    }

留意:加上类名.example的元素务必是块级元素并且必须是body的立即子元素,也便是要设定height=100%,其父元素务必有高宽比

方式2:应用肯定精准定位(absolute)

给必须撑满的器皿加上肯定精准定位(absolute),随后设定top、left、right、bottom各自为0,以下:

    <html>
        <body>
            <div class="example">
            </div>
        </body>
    <html>
    .example{
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background:rgb(55, 137, 243);
    }

留意:若总体目标元素的父级元素沒有设定过相对性精准定位(relative)或肯定精准定位(absolute),那末总体目标元素将相对html精准定位,html不必须设定宽高;不然相对其设定过相对性精准定位(relative)或肯定精准定位(absolute)的父级元素精准定位,且其父级元素务必有宽度和高宽比,以下:

    <html>
        <body>
            <div class="example2">
                <span class="example"></span>
            </div>
        </body>
    <html>
    .example2{
        position: relative;
        width:100%;
        height:100px;
    }
    .example{
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background:rgb(55, 137, 243);
    }

方式3:应用固定不动精准定位(fixed)

给必须撑满的器皿加上肯定精准定位(absolute),随后设定top、left、right、bottom各自为0,以下:

    <html>
        <body>
            <div class="example">
            </div>
        </body>
    <html>
    .example{
        position: fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background:rgb(55, 137, 243);
    }

留意:应用fixed后,不必须理睬父级元素是不是有精准定位特性,均能撑满访问器可视性地区,但总体目标元素不随翻转器皿的翻转而翻转

方式4:应用flex合理布局

给必须撑满的器皿的父元素加上display:flex,随后给撑满的元素加上flex:1 1 auto,以下:

    <html>
        <body>
            <div class="example">
            </div>
        </body>
    <html>
    html,body{
      width:100%;
      height:100%;
    }
    body{
      display: flex;
    }
    .example{
      background:#fc1;
      flex:1 1 auto;
    }

留意:应用flex一样必须父元素的有高宽比和宽度,不然不容易撑开。

方式5:应用javascript获得访问器高宽比

    <html>
        <body>
            <div class="example">
            </div>
        </body>
    <html>
    <script>
        let example = document.getElementById('example')
        let height = document.documentElement.clientHeight
        example.style.height = `${height}px`
    </script>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服