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容器如何自适应视口大小》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

超级运营术

韩叙 / 中信出版社 / 2017-5

新产品上线，为什么仅仅500次转发能带来300个内测用户？为什么每一次内容推送，都带来App的一次卸载高峰？同类活动那么多，怎样做才能超越竞品，占据头条？为什么有的文案像“小广告”，有的文案像贴心老友？创业公司与大平台的玩法有何不同？ …… 如何从“了解运营”到“精通运营”，可能是运营人*的困惑。《超级运营术》正是对这个问题的全面解答。韩叙总结10年运营......一起来看看《超级运营术》这本书的介绍吧!

码农工具