首先我们要区分关于CSS里height的一个误区，width：100%是保持和父块宽度一样，但是有的时候我们设置height:100%会无效，为什么呢
因为我们在div设计时会控制width，但是一般不会去设置height，除非你想要一个绝对布局另当别论，不然我们都会让里面的内容去自适应它的height，这就是height：100%无效的原因，你不能对一个自适应高度的父类去保持和它一样的高度，父类的高度应该要是确定的。
那么对于高度，确定的高度这里不谈很好实现，有两种高度，全屏高度和保持和另一div相同高度怎么实现呢？
对于全屏高度，你可以选择对<body>标签设置height:100%，再对div设置高度为height:100%，但这样不好，不建议直接对<body>整个块修饰成100%的高度,如果你想对某个块设置成整个网页的高度，可以使用100vh。
vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
如果这个页面头顶有个导航栏，我有个块想要剩余的部分高度怎么办呢？假设头顶的导航栏是100px,那么写calc(100vh - 100px)就行了，要注意的是我-号前后都空了一格，不是为了排版好看，而是如果不空，浏览器不能识别这个式子，当然如果我们非要设置某个块的高度，通常都用min-height，如果里面的内容超过我设置的高度了，或者说以后有什么原因我想改变他的高度，可以让他有个自适应的余地
如果你想保持和一个div的高度一致怎么办，比如说有个左导航栏，右边是正文，正文内容不能确定，导航栏一下比正文长一下比正文短，那排版肯定不好看，想要时刻保持高度一致，用CSS我们就无法实现了，就需要用到脚本来帮助我们实现了

$(function (){
	var height=$(".page-content").outerHeight();//获取到块高度
	$(".nav-left").css("height",height);//匹配
});

那如果我正文的div在运行过程中会变怎么办，比如有隐藏的元素，那不就又不一样了，这样我们就需要把这段代码加到一个时刻监视块高度的函数里
height.js

//一个jquery的插件，用于监听元素宽度高度变化，调用方式：
    //$("classname").bind('resize',function(){
        //callback
        //...
        //...
    //});
 (function ($, window, undefined) {
            var elems = $([]),
                jq_resize = $.resize = $.extend($.resize, {}),
                timeout_id,
                str_setTimeout = 'setTimeout',
                str_resize = 'resize',
                str_data = str_resize + '-special-event',
                str_delay = 'delay',
                str_throttle = 'throttleWindow';
                jq_resize[str_delay] = 250;
                jq_resize[str_throttle] = true;
                $.event.special[str_resize] = {
                    setup: function () {
                        if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                            return false;
                        }
                        var elem = $(this);
                        elems = elems.add(elem);
                        $.data(this, str_data, {
                            w: elem.width(),
                            h: elem.height()
                        });
                        if (elems.length === 1) {
                            loopy();
                        }
                    },
                    teardown: function () {
                        if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                            return false;
                        }
                        var elem = $(this);
                        elems = elems.not(elem);
                        elem.removeData(str_data);
                        if (!elems.length) {
                            clearTimeout(timeout_id);
                        }
                    },
                    add: function (handleObj) {
                        if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                            return false;
                        }
                        var old_handler;
 
                        function new_handler(e, w, h) {
                            var elem = $(this),
                                data = $.data(this, str_data);
                            data.w = w !== undefined ? w : elem.width();
                            data.h = h !== undefined ? h : elem.height();
                            old_handler.apply(this, arguments);
                        }
 
                        if ($.isFunction(handleObj)) {
                            old_handler = handleObj;
                            return new_handler;
                        } else {
                            old_handler = handleObj.handler;
                            handleObj.handler = new_handler;
                        }
                    }
                };
 
                function loopy() {
                    timeout_id = window[str_setTimeout](function () {
                        elems.each(function () {
                            var elem = $(this),
                                width = elem.width(),
                                height = elem.height(),
                                data = $.data(this, str_data);
                            if (width !== data.w || height !== data.h) {
                                elem.trigger(str_resize, [data.w = width, data.h = height]);
                            }
                        });
                        loopy();
                    }, jq_resize[str_delay]);
                }
            })(jQuery, this);

$(function (){
	var height=$(".page-content").outerHeight();
	$(".nav-left").css("height",height);
	$(".page-content").bind('resize',function(){
		var height=$(".page-content").outerHeight();
		$(".nav-left").css("height",height);
	});
});

这样就能实现高度的一个时刻保持一样了