div宽度随屏幕大小变化
题目:
一个页面上两个div左右铺满整个浏览器,
要保证左边的div一直为100px,右边的div跟随浏览器大小变化,
比如浏览器为500,右边div为400,浏览器为900,右边div为800。
方案一:使用flex布局
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
.box{
display: flex;
display: -webkit-flex;
flex-direction: row;
align-items: center;
border: 1px solid #c3c3c3;
} .left {
flex-basis:100px;
-webkit-flex-basis: 100px; /* Safari 6.1+ */
background-color: red;
height: 100%; } .right {
background-color: blue;
flex-grow:;
}
方案一:使用浮动布局
<div class="left"></div>
<div class="right"></div>
*{
margin:;
padding:;
} .left {
float: left;
width: 220px;
background-color: green;
} .right {
background-color: orange;
margin-left: 220px; /*==等于左边栏宽度==*/
}
div宽度随屏幕大小变化的更多相关文章
- 利用onresize使得div可以随着屏幕大小而自适应的代码
原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种 ...
- 3个div 宽度移入移出时变化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue中如何让多个echarts随屏幕大小变化
在vue项目中使用Echarts 一般window.onsize在页面中只能存在一个. 如何在一个页面中多个echarts使用window.onresize? myChart 可以放在Data ...
- vue/cli 3.0 font-size随屏幕大小变化而变化 rem设置
在安装cube-ui框架时 安装成功后在[E:\WWW\xxx\node_modules\vue-cli-plugin-cube-ui\generator\rem\index.js]修改remUnit ...
- android系统如何自适应屏幕大小
1.屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 android将屏幕大小分为四个级别 ...
- Android系统自适应屏幕大小
1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(smal ...
- CSS如何让DIV的宽度随内容的变化
[css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...
- rem、em 、font-size随着屏幕大小的改变而改变
rem 的根标签是html 以html标签上设置的font-size的值为参考点 如: <div id="app"> <div id="son> ...
- HTML页面中JavaScript能获取到的各种屏幕大小信息
在HTML页面中,通过JavaScript代码访问 window 对象,能够获取到很多表征屏幕大小的信息,下面列举并加以区分. window 对象中的屏幕信息 window.innerheight. ...
随机推荐
- c# XML 有多个重复子节点操作
1,继续添加ebm子节点 public static void CreateXml() { //创XML建对象 XmlDocument doc = new XmlDocument(); //声明根节点 ...
- 【JVM】1、java虚拟机参数-X 与 -XX的区别
Options that begin with -X are non-standard (not guaranteed to be supported on all VM implementation ...
- 理解Java反射
一.反射简介 Java让我们在运行时识别对象和类的信息,主要有2种方式:一种是传统的RTTI,它假定我们在编译时已经知道了所有的类型信息:另一种是反射机制,它允许我们在运行时发现和使用类的信息. 1. ...
- layui实现复选框全选,反选
html <div class="layui-input-inline"> <input type="checkbox" class=&quo ...
- 3D-爱心
520把爱心送给她 用自己独有的方式表白,也是爱的一种体现! 所以呢,我就利用自己现有的知识,做了一个3D爱心! 今天是5月21日,博主在这里希望所有看到这个博客的朋友们能够拥有自己美好的爱情! 同时 ...
- pageHelper分页
引入jar包 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pag ...
- 怎么配置wamp下mysql的编码
Windows下的Apache+Mysql/MariaDB+Perl/PHP/Python,一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,但是因为常被放在一起使用,拥有了越来越高 ...
- 让 Angular 应用动起来!
[编者按]本文主要通过生动的实例,介绍为 Angular 应用添加动画的原理与过程.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 我们知道,Angular 应用在更新 DOM 时,会直接将 ...
- 通过递增快照备份 Azure 非托管 VM 磁盘
概述 Azure 存储提供创建 Blob 快照的功能. 快照将捕获该时间点的 Blob 状态. 本文介绍有关如何使用快照维护虚拟机磁盘备份的方案. 如果选择不使用 Azure 备份和恢复服务,但想要为 ...
- Linux 安装MongoDB 并设置防火墙,使用远程客户端访问
1. 下载 MongoDB 提供了 linux 各发行版本 64 位的安装包 下载地址:https://www.mongodb.com/download-center#community 2. 安装 ...