width 100%

1. 对于嵌套元素，父元素如果默认定位，子元素为相对定位或者默认定位，子元素的 width 百分比相对于父元素。
2. 如果父元素默认定位，子元素绝对定位，子元素的 width 百分比相对于上级有定位的元素（最终是 body）。
3. 如果子元素为 fixed 定位，其一直是基于 body，其 width 百分比相对于 body 的宽度。
4. 父元素浮动，子元素 width 百分比不变。

宽度继承

当子元素为块级元素，且不存在浮动、绝对定位、固定定位时，宽度继承。

height 100%

浏览器计算 height 的方式与 width 不同:

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

所以给容器直接设置 height:100% 没有任何效果，
但是同时给 html、body 元素设置 height:100% 之后可以看到效果。
第二种办法：给元素的高度设为

height:100vh;

这是相对于视口的高度100%，可以不用给 html、body 设置 height:100%。

在使用height: 100%;时需要注意的一些事项:
1、Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

margin padding 百分比

margin、padding 设置的百分比是相对于父元素的宽度的。
如果父元素设置有 padding 值， 则子元素定位 top的'百分比'值是 其父元素的height加上padding-top和padding-bottom

top left 百分比 （这里的父元素均为已定位的元素）

1. 父元素相对定位，子元素绝对定位，这是 top 百分比相对父元素高度，left 百分比相对于父元素宽度。
2. 如果父元素有 padding 值，子元素 top 百分比相对于父元素 padding-top + height + padding-bottom 的值。子元素 left 百分比同理。
3. 给父元素设置 box-sizing:border-box; 这时，子元素会忽略父元素的 padding 值，直接相对于父元素的 width 、height 计算 left 、top 百分比。无论父元素是否有边框，均相对于父元素的 clientWidth、clientHeight。

参考资料：
CSS“width:100%”和宽度继承的浅薄认识
如何让 height:100%; 起作用
七个Web前端程序员必须会用css技巧