web容器怎样自适应视口大小

2024年3月2日 144次阅读 来源: MrBean

媒介

在前端生涯上，经常会碰到须要容器自适应视口高度这类状况，本文将引见我能想到的处理这个题目的计划。

基础知识

html元素的高度默许是auto（被内容自动撑开），宽度默许是100%（即是浏览器可视地区宽度），没有margin和padding；

body元素的高度默许是auto，宽度默许是100%，有margin而没有padding；

若想让一个块元素（如div）的高度与屏幕高度自适应，一直充溢屏幕，须要从html层最先层层增加height=100%，而又由于html,body元素的width默许就是100%,因而在里面的div 设定width=100%时就可以和屏幕等宽。

要领一：继续父元素高度

给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%，其父元素必需有高度

要领二：运用相对定位(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);
    }

要领三：运用牢固定位(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后，不须要剖析父级元素是不是有定位属性，均能撑满浏览器可视地区，但目的元素不随转动容器的转动而转动

要领四：运用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一样须要父元素的有高度和宽度，不然不会撑开。

要领五：运用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>
    原文作者：MrBean
    原文地址: https://segmentfault.com/a/1190000019176757
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞