zoukankan      html  css  js  c++  java
  • 理解height 百分比 height:100%

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


    html 的父元素可以理解成window,浏览器会将html填充填充完一个浏览器窗口。 设置html的height为具体的像素值,当其值大于浏览器窗口时,浏览器出现滚动条,当其值小于浏览器窗口时,同样会将html填充完整个浏览器窗口(可以设置背景测试)。设置html的height为百分比时,当其值大于100%出现滚动条,当小于100%时同样会将html填充完整个浏览器窗口(可以设置背景测试)。 但是子html的子元素的高度设置成百分比时,会按照html设置的高度值计算比例。


    对于body的设置的高度小于浏览器窗口时,同样会填充满整个浏览器窗口(可以设置背景测试),但是其子元素的高度设置成百分比时,会按照body设置的高度值来计算比例。

    <!doctype html>
    <html  style="height:50%; background-color:#9F0">
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body   style="height:100%; ">
     <div style="height:100%; background-color:#FFF" >
     html的高度设置成小于浏览器窗口高度,但是仍然填充满整个浏览器窗口,但是其子元素的高度设置成百分比时,会按照父元素设置的高度值来计算比例。
      </div>
    </body>
    </html>

    image

    <!doctype html>
    <html  style="height:50%; ">
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body   style="height:100%; background-color:#9F0">
     <div style="height:100%; background-color:#FFF" >
     body的高度设置成小于浏览器窗口高度,但是仍然填充满整个浏览器窗口,但是其子元素的高度设置成百分比时,会按照父元素设置的高度值来计算比例。
      </div>
    </body>
    </html>

    image

    <!doctype html>
    <html  style="height:150%; ">
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body   style="height:100%; background-color:#9F0">
     <div style="height:100%; background-color:#FFF" >
     html的高度设置成大于浏览器窗口高度,会出现滚动条。
      </div>
    </body>
    </html>

    image

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body   style="height:50%; background-color:#9F0">
     <div style="height:100%; background-color:#FFF" >
       由于html没有设置高度,在body上面设置height:50%,未达到预期效果
      </div>
    </body>
    </html>

    image

    <!doctype html>
    <html style=" height:100%">
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body   style="height:50%; background-color:#9F0">
     <div style="height:100%; background-color:#FFF" >
       由于html没有设置高度,在body上面设置height:50%,未达到预期效果
      </div>
    </body>
    </html>

    image

  • 相关阅读:
    Linux设置系统时间并同步到硬件
    centos6.9安装mysql5.7.22并设置初始密码
    mysql修改数据库文件存储位置
    mysql1.7(mysql优化,mysql-mmm软件介绍,mysql高可用集群。)
    mysql1.6(主从同步,数据读写分离)
    Mysql1.5(binlog增量备份与恢复,innobackupex)
    Mysql1.4(用户授权,权限撤销;图形管理工具,数据备份-恢复)
    MYSQL1.3(存储引擎,数据导入导出,管理表记录)
    MYSQL1.2(字段管理,索引类型)
    mysql1.1(搭建,数据类型,基本使用)
  • 原文地址:https://www.cnblogs.com/lion88/p/4203240.html
Copyright © 2011-2022 走看看