视口单位：vw，vh，vmin，vmax（表示再也不想用rem了！）

百分比布局：

html, body { height: 100%; }
    
.sidebar {
  height: 100%;
  width: 100%;
}

为什么html和body需要高度？百分比是相对于其父属性。当父级的高度由它的子级定义时，没有已知的高度设置，因此高度被完全忽略。这意味着你必须在DOM树中的每个父元素上设置高度。你也可以使用新的视口单位。

视口单位：

• vw：1/100视口宽度
• vh：1/100视口高度
• vmin：宽和高最小边的1/100
• vmax：宽和高最大边的1/100

直接在css中使用，如：10vw。

 注：IE9使用vm代替vmin。它不支持vmax。

澄清：1vmax等于1vh在纵向模式，而在横向模式下，1vmax将等于1vw。

个人建议：使用视口给元素设置宽高时，为了避免比例不协调，使用同一个单位比较好，如vmin、vmax。

 

转载于:https://www.cnblogs.com/xiamuqing/p/6362918.html