网页前端div的高度设置
首先我们要区分关于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);
});
});
这样就能实现高度的一个时刻保持一样了
字节跳动公司福利 1380人发布