关于css中height:100%无效的问题

       做项目的时候想要让一个div块自适应浏览器按比例宽度和高度占据页面左边，css是这样的,

.nav-left{
    float:left;
    width:15%;   
    height:100%;
}

       结果发现，给边框加上颜色，发现是空白的，也就是说width和height都没有生效。

       但是如果给这个div块加上内容，比如说加上背景色，就会发现width生效了，而height依然没有生效。查了下是跟父元素的width和height默认值有关。

       首先，div的父元素是body，body的元素是html，这三个元素的width和height默认值都是0，受子元素内容的大小影响。当这个div没有内容时，width和height都是0，父元素也为0，所以显示什么都没有。当这个div有内容时，作为块元素，无论内容多少，它都会默认占据一行，使得父元素的width值为100%，这时“width:15%;” 就生效了。另一方面，它的内容的高度只有一行，影响到父元素的高度也只有一行的高度，所以“height:100%;”只有一行的高度，实际上height生效了，但是显示的效果并不是我想要的。

       那么想要实现这个div块的高度撑起整个页面的效果，该怎么做呢？只需要设置父元素的width和height就行。因为“%”这个单位是受父元素的大小的影响，body如果用“%”也会受html的大小影响。所以需要同时设置body和html。

html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}