精华内容
下载资源
问答
  • js获取div元素高度和宽度的方法

    千次阅读 2019-10-08 15:21:50
    js获取div元素高度与宽度的方法 js获取div元素的高度与宽度要用的 clientHeight 与 clientWidth方法 clientHeight:返回元素的可视高度 clientWidth:返回元素的可视宽度 示例代码: <div id="...

    前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生JS与JQ如何快速的获取DIV元素的高度和宽度的方法。

    js获取div元素高度与宽度的方法

    js获取div元素的高度与宽度要用的 clientHeight 与 clientWidth方法
    clientHeight:返回元素的可视高度
    clientWidth:返回元素的可视宽度
    示例代码:

    <div id="mochu" style="height: 200px;width:150px;color:#fff;background-color: blueviolet;">
        飞鸟慕鱼博客
    </div>
    <script>
        //获取高度
        var h = document.getElementById('mochu').clientHeight;
        //获取宽度
        var w = document.getElementById('mochu').clientWidth;
        console.log(h);
        console.log(w);
    </script>
    

    打印结果:
    200
    150

    jquery获取div元素高度与宽度的方法

    相对于原生的 javascript 来说,使用 jquery 来获取 div 元素的高度与宽度要简单的多。
    jq获取div元素宽度的方法
    $(selector).width()
    jq获取div元素高度的方法
    $(selector).height()
    示例代码:

    <div id="mochu" style="height: 100px;width:150px;">
        http://www.feiniaomy.com
    </div>
    <script>
        //获取高度
        var h = $('#mochu').height();
        //获取宽度
        var w = $('#mochu').width();
        console.log(h);
        console.log(w);
    </script>
    

    打印结果:
    100
    150
    文章转自:https://www.feiniaomy.com/post/449.html

    展开全文
  • 每当进行页面布局时,我们都有这样的需求,就是当子元素div高度不确定时父div自适应高度,本文整理的多种方法可以解决此问题,感兴趣的朋友可以参考下
  • 设置vh使div元素高度充满屏幕

    千次阅读 2019-05-14 17:50:23
    在做项目的过程中老师要求要让div元素充满整个屏幕,之后查资料发现vh和vw,就做一个简单的介绍 1.vh css3新单位,view height的简写,是指可视窗口的高度。1vh=视窗高度的1%,height: 100vh;就是屏幕高度的100%,也...

    在做项目的过程中老师要求要让div元素充满整个屏幕,之后查资料发现vh和vw,就做一个简单的介绍

    1.vh

    css3新单位,view height的简写,是指可视窗口的高度。1vh=视窗高度的1%,height: 100vh;就是屏幕高度的100%,也就是高度满屏。

    heigth:100vh;
    

    2.vm

    css3新单位,view width的简写,是指可视窗口的宽度。1vw=视窗宽度的1%,width:100vm;就是屏幕宽度的100%,也就是宽度满屏。

    div{
        height:50vh;    /*占高度的一半*/
        width: 50vw;    /*占宽度的一半*/
    }
    

    3.vw、vh 与 % 百分比的区别

    (1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
    (2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的 优势。

    展开全文
  • jQuery获取隐藏元素高度,了解一下   &lt;!DOCTYPE html&gt; &lt;html lang="...简单的jQuery获取隐藏元素高度、jQuery获取元素高度、jQuery获取DIV高度&lt;/title&gt;

     jQuery获取隐藏元素高度,了解一下

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>简单的jQuery获取隐藏元素高度、jQuery获取元素高度、jQuery获取DIV高度</title>
    	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    	<style type="text/css">
    		html,body{margin: 0;padding: 0;}
    		.ShowHide{display: none;}
    		.ShowHideCh{display: none;}
    	</style>
    	<script type="text/javascript">
    		jQuery(function () {
    			jQuery('.ShowHide').css({'visibility': 'hidden','overflow': 'hidden','display': 'block','position': 'absolute','top': '-10000px'});//先占位置
    			var GetHeight = jQuery('.ShowHide').height();
    			var GetHeightCh = jQuery('.ShowHideCh').height();
    			//alert(GetHeight);
    			//alert(GetHeightCh);
    			jQuery('.ShowHide').css({'visibility': '','overflow': '','display': '','position': '','top': ''});//去掉占位置
    		});
    	</script>
    </head>
    <body>
    <div class="ShowHide">
    	<div class="ShowHideCh">
    		<p>666666</p>
    		<p>666666</p>
    		<p>666666</p>
    		<p>666666</p>
    	</div>
    	<p>666666</p>
    	<p>666666</p>
    	<p>666666</p>
    	<p>666666</p>
    	<p>666666</p>
    	<p>666666</p>
    	<p>666666</p>
    	<p>666666</p>
    </div>
    <p>666666</p>
    </body>
    </html>

     

     大家有好的方式欢迎一起探讨!

     

    展开全文
  • 如何使网页的div元素高度满屏

    千次阅读 2017-11-06 18:47:59
    CSS3  引入了新单位: ...:直接给div高度设成 height:100vh,即可用让div高度是视窗的高度了 使网页的div宽度满屏的方法:直接给div的宽度设成width:100vw,即可将div的宽度设成视窗的宽度

    CSS3 引入了新单位:vwvhvminvmax

    (1) vwvhvminvmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点,而是由视窗( Viewport)大小来决定的,  1代表  1%,视窗( Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

    vw:视窗宽度的百分比( 1vw 代表视窗的宽度为  1%
    vh:视窗高度的百分比
    vmin:当前  vw 和  vh 中较小的一个值
    vmax:当前  vw 和  vh 中较大的一个值

    (2) 浏览器兼容
    桌面PC:
    Chrome:自  26 版起就完美支持(2013年2月)
    Firefox:自  19 版起就完美支持(2013年1月)
    Safari:自  6.1 版起就完美支持(2013年10月)
    Opera:自  15 版起就完美支持(2013年7月)
    IE:自  IE10 起(包括  Edge)到现在还只是部分支持(不支持  vmax,同时  vm 代替  vmin

    移动设备:
    Android:自  4.4 版起就完美支持(2013年12月)
    iOS:自  iOS8 版起就完美支持(2014年9月)


    使网页的div高度满屏的方法:直接给div的高度设成  height:100vh,即可用让div的高度是视窗的高度了

    使网页的div宽度满屏的方法:直接给div的宽度设成width:100vw,即可将div的宽度设成视窗的宽度

    展开全文
  • div父元素的高度随子元素高度的变化而变化
  • div元素自适应浏览器屏幕高度

    千次阅读 2018-09-19 18:00:58
    很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度,比如左侧菜单高度自适应 所以可以用window.innerHeight然后绑定到元素上面 如图,我用vue,jq的也差不多。反正只要获取到window.innerHeight就行了。 ...
  • 我们可能在审查网页元素时,会发现这样的一种情况: ... ...从上面的代码来看,包含一个父div和两个子div。而子div又有高度,但是审查元素时,却发现该父div却没有高度(所以此时父div的背景色#c
  • Div即父容器不根据内容自适应高度,我们看下面的代码:  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。...
  • 例如:下面的div如果想father的div随着son的div自动适应搞度,只需要加上一个清除浮动的标签即可!&lt;div class='father'&gt; &lt;div class='son'&gt;&lt;/div&gt; &lt;br style='...
  • 通常情况下,我们要实现左侧导航相对于右侧内容区域,高度能够充满整个屏幕。下面介绍一种用CSS实现的方法,如图: 实现方法很简单,直接上代码: <div style="position: absolute;top: 0;left: 0;bottom: 0...
  • div高度为0解决

    千次阅读 2016-10-14 12:26:44
    div里面有内容高度仍是0,多半是因为元素浮动引起,div里面的元素浮动到其它地方,div里实际上没有内容,因而为0;  用如下例:  &lt;div&gt; &lt;a&gt; &lt;img&gt;&lt;/img...
  • css 父div高度为0

    千次阅读 2015-01-24 23:35:04
    当css 中父类div 高度为为时,可能是子类div 元素用了float,没有加clear属性。 .clear { clear: both; font-size: 0; line-height: 0; height: 0; visibility: visible; }
  • 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子! 解决这个问题的根源就是清除浮动: 1 , 给父节点增加样式...
  • 【CSS】div元素height:100%高度为什么不生效

    万次阅读 多人点赞 2017-01-13 14:40:56
    以前一直很郁闷一个问题,什么设置height:100%不生效,尤其是设置body:height:100%不生效,后来就很少使用了这个了。今天在学习谷歌地图时关于height:100%看到了解答: In specific, all percentage-based sizes ...
  • 1.背景 最近在开发过程中,遇到了这么一个很奇怪的现象,在浏览器中打开开发者工具,查看元素时,发现当前元素高度为0,但是查看它的子元素时,发现其子元素高度并不为0,非常奇怪,最后还是通过网络解决了这个...
  • div有内容,父div高度为0是因为子元素设置了 float属性的缘故。
  • div动态元素自适应高度

    千次阅读 2016-02-25 17:44:14
    <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div> 以上是一种方法,在元素中间增加一个元素 <div style="font: 0px/0px sans-serif;clear: both;display: ...
  • 让两个div元素有相同的高度

    千次阅读 2017-11-22 10:44:21
    取得它们的高度后得到最大高度,然后赋值 var $divClass = $('.className'); var height = 0; $divClass.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $...
  • left:0 失败,子元素如果不设置width和height就会直接继承到父元素的width和height,而不是通过内容撑开的宽度和高度。 父元素position:relative;子元素position:absolute:top:50%; 子元素里面加一层div设置...
  • 解决子元素浮动父元素高度为0

    千次阅读 2016-04-09 19:08:07
    我们在CSS中使用float的时候常常会发现父元素的高度为0,如下<!DOCTYPE html> 子元素全浮动父元素高度为0 .box{ /*border:1px s
  • js设置div高度为当前设备的高度

    千次阅读 2020-02-17 16:31:48
    获取当前屏幕高度并赋值到对应的标签 var div_height = window.screen.availHeight; $(".login_aa").height(div_height); 获取当前屏幕高度,并减去100px,然后赋值到对应的标签 var div_height = window.screen...
  • JS实现DIV盒子高度为宽度2倍

    千次阅读 2016-03-11 13:56:10
    JS控制DIV高度,同理可实现控制DIV宽度变化。具体方法如下: 方法一: test var div = document.getElementById("div"); var width=parseInt(div.style.width) || div.offsetWidth; div.style.height=width*2 + ...
  • div元素height:100%高度为什么不生效

    千次阅读 2017-11-16 11:45:45
    以前一直很郁闷一个问题,什么设置height:100%不生效,尤其是设置body:height:100%不生效,后来就很少使用了这个了。 今天在学习谷歌地图时关于height:100%看到了解答: In specific, all percentage-based sizes...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 135,110
精华内容 54,044
关键字:

div元素高度为0