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

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

内容简介：在前端工作中，接口调试经常是不同步的，有时候后端已经定义好接口了，却没有写好接口，或者没有部署到测试环境等，如果觉得用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容器如何自适应视口大小》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

ActionScript 3.0 Cookbook

Joey Lott、Darron Schall、Keith Peters / Adobe Dev Library / 2006-10-11 / GBP 28.50

Well before Ajax and Microsoft's Windows Presentation Foundation hit the scene, Macromedia offered the first method for building web pages with the responsiveness and functionality of desktop programs......一起来看看《ActionScript 3.0 Cookbook》这本书的介绍吧!

码农工具