height_heightmap下载 - CSDN
精华内容
参与话题
  • css之height

    2018-09-28 13:04:36
    转载出处:http://blog.csdn.net/ligang2585116! ... height属性值 这个属性定义元素内容区的高度,在内容区外面...
    转载出处:http://blog.csdn.net/ligang2585116! https://blog.csdn.net/ligang2585116/article/details/79404604

    height属性值

    这个属性定义元素内容区的高度,在内容区外面可以增加内边距、边框和外边距。

    The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.
    From:https://developer.mozilla.org/en-US/docs/Web/CSS/height

    描述
    auto 默认。浏览器会计算出实际的高度。
    length 使用 px、cm 等单位定义高度。
    % 基于其包含块的百分比高度。

    注意:

    • 设置html,body {height: 100%;},其高度为浏览器可视高度。
    • 如果当前元素设置高度100%,其父级元素(包含块)未设置高度,则会受到子元素影响(前提,子元素未脱离文档流,后续说明)

    值为100%

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Height属性</title>
        <style>
            html,body {
                height: 100px;
                width: 100px;
                box-sizing: border-box;
            }
            html {
                background-color: white;
            }
            body {
                background-color: yellow;
                padding: 10px;
                border: 5px solid red;
            }
        </style>
    </head>
    <body>
        <div id="div1" style="height: 100%; box-sizing: border-box;">
            <div id="div2" style="height: 200px; width:200px; background-color: #333; opacity: 0.3;"></div>
        </div>
    </body>
    </html>

    在这里插入图片描述

    ​ 一个div块级元素没有为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。那么,html和body标签的高度也都是由子级元素堆砌撑起来的。

    ​ 元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用,此时的情况是父元素高度依赖子元素堆砌撑高,而子元素依赖父元素的定高起作用,互相依赖,却都无法依赖,死循环了。

    ​ 设置html的height:100%,就是浏览器的可视高度!

    注意

    • body为100*100,div1为70*70,继承的是父级元素内容高度,不包括border和padding!

    • 当html标签无背景样式时,body的背景色其实不是body标签的背景色,而是浏览器的。一旦html标签含有背景色,则body的背景色变成了正常的body标签(一个实实在在,普普通通标签)的背景色,而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色

    • div为块级元素,默认占据一行,可以通过设置display: inline-block来使其受到子元素撑开!

    绝对定位元素高度

    • 设置height:100%;,受其父级定位元素影响;
    • 不设置任何高度,默认为height:auto;,受其子元素内容高度影响(前提,子元素未脱离文档流);

    示例:absolute元素height=100%

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>position Height属性</title>
        <style>
            .box {
                height: 100px;
                width: 100px;
                border: 1px solid red;
                background-color: #00b3ee;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div id="div1" style="position: relative; height: 100px;">
            <div id="div2" style="position: absolute; height: 100%;">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
        </div>
    </body>
    </html>

    div2的高度为100px,受到div1的高度影响;如果去掉div1的height: 100%;,则受到其子元素影响,高度为500px!

    注意:绝对定位,元素相对于position值不为static的第一位祖先元素来定位(脱离文本流

    在这里插入图片描述

    示例:父级定位元素高度100%,子元素absolute不设置高度,孙子元素也是absolute有指定高度

    此时需要动态获取子元素高度!(见下述获取元素高度)

    设置top、left、bottom、right

    <div id="div1" style="position: relative; height: 100px;">
      <div id="div2" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
    </div>

    ​ 如果未设置top: 0; right: 0; bottom: 0; left: 0;,div2的高度为0,设置后高度为100px,受到其父级定位元素影响!

    注意:

    • 这是定位元素受到父级定位元素高度影响的行之有效的方式!
    • 绝对定位元素的父级高度与元素本身的大小无关,直到文档后面的元素都被处理完毕,才可能知道高度。

    inhert

    height:100%height:inherit大部分情况下是一致的,只有当子元素为绝对定位元素,同时,父容器的position值为static的时候,会有一定的差异性!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .outer {
                display: inline-block;
                height: 200px;
                width: 40%;
                border: 5px solid #cd0000;
            }
            .height-100 {
                position: absolute;
                height: 100%;
                width: 200px;
                background-color: #beceeb;
            }
            .height-inherit {
                position: absolute;
                height: inherit;
                width: 200px;
                background-color: #beceeb;
            }
    
        </style>
    </head>
    <body>
        <div class="outer"><div class="height-100"></div></div>
        <div class="outer"><div class="height-inherit"></div></div>
    </body>
    </html>

    height-inherit

    总之,这里,height:inherit的强大好用可见一斑。回头,容器高度变化了,里面的绝对定位元素依然高度自适应。这是很赞的特性,因为如果页面很复杂,避免使用position: relative会让你少去很多z-index混乱层级覆盖的麻烦。

    获取元素高度

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            .box {
                position: absolute;
                height: 100px;
                width: 100px;
                background-color: #00b3ee;
            }
        </style>
    </head>
    <body style="height: 250px;">
        <div id="div1" style="position: relative; height: 100%; width: 100px">
            <div id="div2" style="position: absolute;">
                <div class="box"></div>
                <div class="box" style="transform: translate(0, 100px)"></div>
                <div class="box" style="transform: translate(0, 200px)"></div>
            </div>
        </div>
    </body>
    </html>

    在这里插入图片描述

    Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。

    document.querySelector('#div1').scrollHeight为300px;如果将body的height设置为350px,document.querySelector('#div1').scrollHeight为350px;

    如果子元素高度大于元素设置高度,实际高度则会被撑开!

    参考:【实例】调整区域大小&动态隐藏区域

    参考地址

    展开全文
  • 关于height:100%的简单理解

    千次阅读 2019-03-06 21:33:28
    要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用...

    要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用;其二,标签本身的属性,如果inline属性的标签,如果没有浮动,zoom,或是绝对定位之类属性是不支持百分比高度的,block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。

    而这里要讲的是关于body和html的高度百分比显示的。

    默认状态下,不是高度100%显示的,不要看定义background属性好像就是满屏显示的,此背景已非之背景。用下面这个一测便知。

    body{background:#039; border:50px solid #C00;}
    

    在这里插入图片描述
    那么是否支持height:100%呢?经过我的测试,IE6支持,Firefox浏览器不支持。

    要想让Firefox浏览器也支持的height:100%是简单的,就是设置标签height:100%,一旦设置了height:100%则无论哪个浏览器下都支持height:100%了,而内部的容器也可以支持height:100%了。

    前段时间看到百度的一道面试题,说什么透明层无论滚动与否都满屏显示,其实就是对和标签做一番手脚,两者高度100%显示,同时溢出隐藏(overflow:hidden),然后用一个

    高度100%显示,溢出滚动。而这个透明层就使用绝对定位且与这个
    平级,高宽100%显示,就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。

    展开全文
  • jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法。对应的宽度获取方法分别为.width()、.innerWidth()和.outerWidth(),在此不详述。 1. .height() 获取匹配元素...

    jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法。对应的宽度获取方法分别为.width()、.innerWidth()和.outerWidth(),在此不详述。

    1. .height()

    获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值(带一个参数)。

    注意:1).css('height')和.height()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。

    2).height()总是返回内容宽度,不管CSSbox-sizing属性值。.height('value')设置的容器宽度是根据CSSbox-sizing属性来定的, 将这个属性值改成border-box,将造成这个函数改变这个容器的outerHeight,而不是原来的内容高度。

    2. .innerHeight()

    为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。

    3. .outerHeight()

    获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。

    在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top,border-bottom ;如果includeMargin参数是true,那么margin (top 和 bottom)也会被包含。

    展开全文
  • $( ).height( );和$().css("height",)的区别$().height()是不包含padding和margin的设置,而$().css("height",)是包含的,和border-box是有点类似的效果
    $( ).height( );和$().css("height",)的区别
    $().height()是不包含padding和margin的设置,而$().css("height",)是包含的,和border-box是有点类似的效果
    展开全文
  • 真正的能理解CSS中的line-heightheight与line-height

    万次阅读 多人点赞 2020-02-26 09:29:24
    在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别。 基本...
  • 设置height=100%不好使原因与解决

    千次阅读 2018-06-11 12:28:39
    之前写项目时候发现在设置height:100%不生效,而且设置body:height:100%也是不生效,于是在就查询原因,终于找到不生效的原因:In specific, all percentage-based sizes must inherit from parent block elements, ...
  • 关于height:100%和height:100vh的区别

    万次阅读 多人点赞 2019-09-03 12:57:22
    关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%,也就是说 height:100vh ==height:100%; 但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0, 但是设置height:100vh...
  • 介绍iPad设备UI的长宽高

    万次阅读 2012-04-11 15:28:39
    iPad Landscape Width ...iPad Landscape Height 768px Status Bar Height 20px Nav Bar Height 44px Main Cont
  • 微信小程序 设置height 100%不起作用

    万次阅读 2018-03-29 16:31:52
    问题:小程序设置背景图片高度适应整个屏幕,设置height 100% 不起作用?.container-all{ width: 100%; height: 100%;}.bg-img{ width: 100%; height: 100%; display: block;}解决办法:在上面添加一个page 样式就...
  • height:calc(100% - 10px)的用法 - 布局篇

    万次阅读 2019-03-02 17:53:07
    如何让一个 height:calc(100% - 10px)的用法 - 布局篇
  • 父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%;只有当父级元素满足min-height:1000px;设置的条件才触发;浏览器默认是不会触发的,所以子元素的100%的高度继承就失效了。...
  • 【CSS】div等元素height:100%高度为什么不生效

    万次阅读 多人点赞 2020-03-07 22:04:05
    以前一直很郁闷一个问题,为什么设置height:100%不生效,尤其是设置body:height:100%不生效,后来就很少使用了这个了。今天在学习谷歌地图时关于height:100%看到了解答: In specific, all percentage-based sizes ...
  • CSS3 如何让height:auto实现transition过渡效果
  • line-height失效解决办法

    千次阅读 2018-07-22 00:26:39
    对和文字相连接的img、input、textarea、select、...margin: (所属line-height-自身img,input,select,object高度)/2px 0; vertical-align:middle-------垂直居中同时该属性指挥对inline-block元素起作用哟    ...
  • 移动端line-height问题

    万次阅读 2017-12-14 19:25:24
    最近碰到了这样一个问题,设置line-height属性让文字垂直居中,发现在PC端肉眼观察是居中的,但是在移动端(Android)上总是发现文字偏上,所以有以下的研究。 搜索发现有人说在Android上会有2px的向上偏移,但是...
  • 父容器display:flex后,子元素的内部元素height:100%无效解决方法 解救办法:父类容器position:relative;子元素:position:absolute;width:100%,height:100%; 效果图: 代码如下: ...
  • 为啥你的height:100%不起作用?

    万次阅读 2018-03-04 16:25:29
    1、百分比宽高 的设定 对于w3c中对width 与height的解释,可以明确%设定宽高是根据父级宽高来定的:2、width:100%随意写一段代码,设置一个背景颜色以便查看效果 可以看到,宽度的100%很容易实现,但是height:100...
  • 先说下为什么line-height等于元素高度文字却没有垂直居中,其实line-height等于元素高度的时候文本并不是真的居中了,而是看着居中了,当元素高度和font-size差距较大的时候,这种不是真正的居中就越发的明显,这里...
  • CSS | width、height中auto与100%与固定值有什么不同

    万次阅读 多人点赞 2018-07-08 14:02:44
    由于多次在设置width及height处出错导致不显示,总结了一篇固定值与auto、100%的差别,前面举例对比部分有基础的同学可以略过直接看总结。总结:(1)width、height使用固定值是一定会显示的,但是除非是小型项目...
  • height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已 height:663px是高度就不用讲了,每个浏览器都...
1 2 3 4 5 ... 20
收藏数 1,865,739
精华内容 746,295
关键字:

height