css - 全屏
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节点的高度来自于它的内容，但你可以手动设定它的高=屏幕可视区域的高。
<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全屏布局的5种方式
× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结 前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介 ...
- CSS全屏布局的6种方式
前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...
- [css]全屏背景图片设置,django加载图片路径
<head><style type="text/css"> #bg { position:fixed; top:; left:; width:100%; h ...
- 移动端toast 提示，HTML css 全屏垂直水平居中
- CSS+DIV两栏式全屏布局
在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
- CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
随机推荐
- Day6 三种结构 顺序选择循环！
顺序结构 从上到下依次执行,它是任何算法都离不开的一种基本算法结构. package com.xiaoming.struct;public class ShunXuDemo { public ...
- Spring中定时任务@Scheduled的一点小小研究
最近做一个公众号项目,微信公众号会要求服务端找微信请求一个access_token,获取的过程: access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_tok ...
- python -- 模块与类库
一.模块 模块(Module)是由一组类.函数和变量组成的,模块文件的扩展名是.py或.pyc 在使用模块之前,需要先使用import语句导入这个模块. 语法格式如下: import 模块名 from ...
- 微信小程序云开发-数据库-删除数据
一.js文件使用.remove()删除单条数据 在js文件中写updategood函数,在函数中使用.doc()指定要删除的数据id,调用.remove()方法删除数据. 二.wxml文件添加[删除] ...
- AI开发者十问：10分钟了解AI开发的基本过程
摘要:从AI开发模型.框架.工具,到提升开发效率的学习办法,为AI开发者逐一解答. 本文分享自华为云社区<10分钟了解AI开发的基本过程>,作者:简单坚持. 1.AI开发究竟在开发什么? ...
- DNS Bind日志详述
简介 在默认情况下,BIND9 把日志消息写到 /var/log/messages 文件中,而这些日志消息是非常少的,主要就是启动,关闭的日志记录和一些严重错误的消息:而将调试日志信息写入 BIND ...
- PHP5.6.6上运行 ecshop 2.7.3常见问题处理
ecshop在在PHP5.6.6版本以后,有了很多细微的变化.而ECSHOP官方更新又太慢,发现这些问题后也不及时升级,导致用户安装使用过程中错误百出. 整理一下我遇到的问题希望对你们能有些帮组也为了 ...
- Discuz 7.x/6.x 全局变量防御绕过导致代码执行
地址 http://192.168.49.2:8080/viewthread.php?tid=13&extra=page%3D1 安装成功后,找一个已存在的帖子,向其发送数据包,并在Cooki ...
- [源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现
[源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现 目录 [源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现 0x00 摘要 0x01 基础类 1. ...
- 白话JavaScript原型链和继承
原型基础 每个函数都有一个prototype属性,指向函数的原型对象 每个对象都一个私有属性 __proto__, 默认指向其构造函数的prototype 在JS中所有函数都是Function构造出来 ...