网页前端div的高度设置

蔚落 2022-04-16 05:56 433阅读 0赞

首先我们要区分关于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);
    	});
    });

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