通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

一、应用场景

左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应

二、思路

首先把这个问题分步解决，需要攻克以下两点：

1、让两个div并排到一行

2、让一个div宽度固定，另个div占据剩下宽度的空间

关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；

关于第二点，首先有一个宽度固定的div，另外自适应的div宽度是多少？首先这个宽度不能写“100%”，因为这里的100%是相对于第一个非静态祖先元素的，也就是说如果这样写，页面会出现整个页面宽度+左边固定列宽度的情形。那么对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。

• 这是一个用vue.js对css操作完成的实例。
• 当然用了flex简单布局。

一、先创建一个html文件，记得添加vue库文件。

二、创建一盒容器vmdiv，用vue绑定它，测试vue绑定后的插入值text1效果。

三、加入文本框和两个按钮。

四、通过flex排序，让它们三个竖排。比例为文本框占4，按钮占1。

五、测试一下按钮的点击事件。

突然想做一个能在一个范围内，添加删除DIV，然后还能改变DIV大小、颜色、位置，可以拖拽可以吸附这么一个东西，网上找到很多独立的，比如拖拽，比如吸附，比如范围内拖拽等，我想把这些功能整合到一起。

好，现在就开始吧

准备原料：

1.新建一个html文件：template_index.html

2.引入jquery.js（使用jquery），jquery-ui.js（用他里面的一个自动吸附功能），jquery.colorpicker.js（颜色选择插件）

最简单的方法：

<div style="height:300px;width:100px;overflow:auto"><div/>（height和width根据需求设定）

注意:如果只写height就只有垂直滚动条，只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于300px就会出现滚动条，小于300px就没有滚动条。同理，如果宽度大于100px出现滚动条，小于就没有。

一、DIV高度自适应（父div高度随子div的高度改变而改变）

1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

代码：

<styletypestyletype="text/css">

#aa{border:#000000solid5px}

#bb{border:#00ffffsolid5px;}

#cc{border:#0033CCsolid5px}

Flex基本概念

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。

在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。