css - 全屏

heml和body元素的宽高

html与body都是块元素，但它俩比较特殊，宽高由如下定义：

1.默认的宽度=浏览器可视区域的宽度（不包含滚动条），可设置大于可视区域的宽度，但不会计算自身所包含的元素的宽度。也即html与body的宽度是可视区域的宽度（排除滚动条），也可以设定大于可视区域的宽度，但无论如何其宽度与自身所包含的元素无关

2.高度为auto（自适应，初始值为0），会随着自身所包含的元素的高度的变大而改变

3.为body设置背景色，实际上是为整个文档设置背景色，与body无关

4.文档必须有DOCTYPE声明，如果没有DOCTYPE声明，那么html和body元素的尺寸会有很大的变化。

全屏幕布局

全屏幕布局指的是浏览器只显示在客户区可视区域内的内容，其它不在可视区的元素全部隐藏，这样就不会出现滚动条，然后通过js插件（isicroll）的上推下拉、左右滑动来控制余下内容的显示。像这种全屏幕布局，首先就需要用css控制html与body的高度。在DOCTYPE声明的html文档中，html节点的高度来自于它的内容，但你可以手动设定它的高=屏幕可视区域的高。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
        }

        html, body {            
            height: 100%;
        }

        .containner-box {
            width: 100%;
            height: 100%;
            background: #bceafe;
        }

        /*顶部搜索栏脱离标准流，containner-box的高度不再包含搜索栏的高度*/
        .product-search-box {
            width: inherit;
            height: 45px;
            position: fixed;
            background: #F1F1F1;
        }

        .product-search-box a:first-child {
            position: absolute;
            top: 22.5px;
            margin-top: -8px;
            left: 5px;
        }

        .product-search-box a:last-child {
            position: absolute;
            top: 22.5px;
            margin-top: -8px;
            right: 8px;
        }

        .product-search-box form {
            width: inherit;
            height: inherit;
            padding: 0 30px;
        }

        .product-search-box input {
            width: inherit;
            height: 32px;
            margin-top: 6.5px;
            border-radius: 3px;
            border: 1px solid #DDDDDD;
        }

        .product-content {
            width: 100%;
            height: 100%; /*跟文档区域一样高*/
            background: #ff6a00;
            padding-top: 45px; /*padding一下避免被搜索栏挡住*/
        }

        .product-content .f_left, .product-content .f_right {
            height: 100%;
        }

        /*左部导航浮动后脱离正常文档流*/
        .product-content .left {
            width: 90px;
            height: 100%;
            float: left;
            overflow：hidden;
            background: #f0b0fc;
        }

        /*左部因为浮动，此元素宽度默认占满父元素，*/
        .product-content .right {
            height: 100%;
            overflow: hidden; /*设hidden，以便是浮动元素不会覆盖住当前元素*/
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="containner-box">
        <div class="product-search-box">
            固定顶部
        </div>
        <div class="product-content">
            <div class="left">
                <div style="height:2000px;width:1000px;">
                    左
                </div>
            </div>
            <div class="right">
                <div style="height:2000px;width:1000px;">右</div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="Scripts/iscroll.js"></script> 需要用到这个插件
<script>
    window.onload = function () {
        var leftBox = document.querySelector('.left');
        console.log(leftBox);
        leftBox.addEventListener('touchmove', function (e) {
            e.preventDefault();
        });
        var rightBox = document.querySelector('.right');
        rightBox.addEventListener('touchmove', function (e) {
            e.preventDefault();
        });

        //容器内上下左右滚动
        //子容器尺寸大于父容器，哪怕只大1px也支持滚动，子元素必须大于
        new IScroll(leftBox, {
            scrollX: true, 
            scrollY: true
        });

        new IScroll(rightBox, {
            scrollX: true,
            scrollY: true
        });
    }
</script>

css - 学习总目录

css - 全屏的更多相关文章

  1. CSS全屏布局的5种方式

    × 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结 前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介 ...

  2. CSS全屏布局的6种方式

    前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...

  3. [css]全屏背景图片设置,django加载图片路径

    <head><style type="text/css"> #bg { position:fixed; top:; left:; width:100%; h ...

  4. 移动端toast 提示，HTML css 全屏垂直水平居中

  5. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  7. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  8. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  9. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

随机推荐

  1. Java基础00-方法引用32

    1. 方法引用 Java8新特征之方法引用 1.1 体验方法引用 代码示例: 需求: 1:定义一个接口(Printable):里面定义一个抽象方法: void printString(String s ...

  2. vite插件-自动生成vue组件文档

    特点 支持热更新 快速启动,依赖于 vite,无需另起服务 自动生成组件导航 ui 采用了vant-ui的样式 核心方法覆盖率达到了 92.86% 使用 yarn add vite-plugin-vu ...

  3. 高性能内存图数据库RedisGraph（二）

    这篇文章主要介绍用一下RedisGraph的历史和现状. 2018年5月,Redis Labs发布了RedisGraph的预览/测试版.6个月后,在Redis Labs和开源社区的开发者们的共同努力下 ...

  4. 一行代码让matplotlib图表变高大上

    1 简介 matplotlib作为Python生态中最流行的数据可视化框架,虽然功能非常强大,但默认样式比较简陋,想要制作具有简洁商务风格的图表往往需要编写众多的代码来调整各种参数. 而今天要为大家介 ...

  5. Windows环境安装kafka

    前言 注意事项: 需要有jdk,jdk8以上.配置好环境变量. 参看链接:https://blog.csdn.net/weixin_38004638/article/details/91893910 ...

  6. node fs-extra文件操作模块的使用（支持同步、异步）

    用法参见:fs-extra

  7. edraw mindmaster pro 8.1.0安装破解教程

    Edraw MindMaster Pro 8.1.0是一款思维导图(脑图)设计软件,头脑风暴.思维整理.项目策划.团队协作,多场景提升您的效率,功能齐全,个人觉得比xmind好用上手,文章手把手教你安 ...

  8. springmvc学习指南 之---第24篇 国际化问题

    writedby 张艳涛,今天一天就搞了一个这个问题,主要是下路,遇到springmvc-config.web的配置和拦截器的使用问题, 看了几天的spring发现都没讲拦截器,之前看了两天sprin ...

  9. jvm源码解读--15 oop对象详解

    (gdb) p obj $15 = (oopDesc *) 0xf3885d08 (gdb) p * obj $16 = { _mark = 0x70dea4e01, _metadata = { _k ...

  10. C++手写内存池

    引言 使用new expression为类的多个实例分配动态内存时,cookie导致内存利用率可能不高,此时我们通过实现类的内存池来降低overhead.从不成熟到巧妙优化的内存池,得益于union的 ...