网页前端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);});
});

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

网页前端div的高度设置相关推荐

css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100％？
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
html div剩下高度设置,使div填充剩余屏幕空间的高度
使用flexbox,您可以轻松地在具有固定尺寸,内容大小尺寸或剩余空间尺寸的任何行或列之间切换.在我的示例中,我已将标题设置为与其内容对齐(根据OPs问题),我添加了一个页脚以显示如何添加固定高度区域 ...
html左边高140px怎么设置,html：侧边栏+滚动div，高度设置为当前页面大小
我有一个侧边栏 #sidebar { float: left; position: relative; width: 200px; padding: 20px; } 和一个主体: #main { ma ...
html 给div设置高度,div高度设置 DIV 高度篇
DIV 高度教程-DIV的高度设置篇如何对div设置高度呢?答案很简单使用css height样式即可设置div高度. div的高度图我们要对div对象设置高度样式,一般分为设置固定高度,最小高 ...
html中隐藏div的高度,jQuery如何获取隐藏元素的高度？
一个HTML元素可以在jquery的hide()函数的帮助下隐藏,或者可以通过在css中使用visibility:hidden;来轻松隐藏.我们也可以很容易地使用jquery来找到这个隐藏元素的高度. ...
css如何自适应浏览器的高度,div css 高度宽度自适应浏览器屏幕大小
DIV布局--IT北瓜原创 html,body{ font: 100% 微软雅黑, 宋体, 新宋体; margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 ...
html给div设置宽度无效,HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: 1111 ...
网页div滚动条样式设置
网页div滚动条样式设置 ::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radi ...
div+css中设置了float属性后如何让外层的高度随着内层的高度大小自动调整
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

网页前端div的高度设置

网页前端div的高度设置相关推荐

最新文章

热门文章