zoukankan      html  css  js  c++  java
  • CSS中元素的height:100%如何起作用的?自适应高度

    Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。而当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?

    答:

    高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

    因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。

    如何使用绝对定位来使得自适应屏幕高度:将父级添加height:100%或者将元素绝对定位

    1.<style>
    *{padding: 0;margin: 0;}
    body,html{height: 100%;}//父级元素都添加
    #wrap{ 100%;height: 100%;background: red;
    /*position: absolute;left: 0;top: 0;*/
    }

    </style>
    <title>Title</title>
    </head>
    <body>
    <div id="wrap"></div>
    </body>
    2. <style>

    *{padding: 0;}
            #wrap{ 100%;height: 100%;position: absolute;left: 0;top: 0;}//不加绝对定位高度是撑不开的
    </style>
    <title>Title</title>
    </head>
    <body>
    <div id="wrap"></div>
    </body>
  • 相关阅读:
    委托,匿名方法,Lambda,泛型委托,表达式树
    Winform 异步调用一个方法
    计算两个经纬度的直线距离
    多线程中线程同步的几种方式
    音频文件相关
    c# 语音(二)文字生成WAV文件
    c# 语音
    三种创建委托的方式
    RunLoop 再次 探索与源码简析
    SDWebImage 实现原理与源码简析
  • 原文地址:https://www.cnblogs.com/fesf/p/6815864.html
Copyright © 2011-2022 走看看