web容器如何自适应视口大小

栏目: CSS · 发布时间: 5年前

内容简介:在前端工作中,接口调试经常是不同步的,有时候后端已经定义好接口了,却没有写好接口,或者没有部署到测试环境等,如果觉得用mock模拟数据不够真实,尝试一下以下的模拟方式,直接劫持接口,返回你自定义的数据Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改。代理就是在客户端和服务器之间设置一道关卡,客户端先将请求数据发送出去后,代理服务器会将数据包进行拦截,代理服务器再冒充客户端发送数据到服务器;同理,

前言

在前端工作中,接口调试经常是不同步的,有时候后端已经定义好接口了,却没有写好接口,或者没有部署到测试环境等,如果觉得用mock模拟数据不够真实,尝试一下以下的模拟方式,直接劫持接口,返回你自定义的数据

基础知识

Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改。

代理就是在客户端和服务器之间设置一道关卡,客户端先将请求数据发送出去后,代理服务器会将数据包进行拦截,代理服务器再冒充客户端发送数据到服务器;同理,服务器将响应数据返回,代理服务器也会将数据拦截,再返回给客户端。

Fiddler可以抓取支持http代理的任意程序的数据包,如果要抓取https会话,要先安装证书。

方法一:继承父元素高度

给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>

以上所述就是小编给大家介绍的《web容器如何自适应视口大小》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

疯狂XML讲义

疯狂XML讲义

李刚 / 电子工业出版社 / 2009-11 / 65.00元

《疯狂XML讲义》主要以XML为核心,深入地介绍了XML的各种相关知识。《疯狂XML讲义》作为疯狂Java体系图书之一,依然保持该体系图书系统、全面的特点:不仅详细介绍了XML,文档的各种知识,还通过案例示范了实际开发中如何应用XML知识。 《疯狂XML讲义》主要分为五个部分。第一部分介绍了XML、DTD、XML Schema等基础知识,这些知识主要教读者如何定义有效的XML文档,这部分内容......一起来看看 《疯狂XML讲义》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具