zoukankan      html  css  js  c++  java
  • Div的宽度与高度的100%设定

    div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效。

    举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级div的padding和margin影响,而其实际宽高不受影响。值得玩味噢!

    浏览器一般默认解释为内容的高度,而不是100%。但是只要为html和body设置高度为100%就可以了:html,body{height:100%;},这样之后div会按比例来继承上一级的高度了,仅仅设置的DIV元素的height属性貌似没有什么效果。

    那么,如下的样式可以设置Div撑满整个页面:

    <style type="text/css">
            html
            {
             height:100%;
             margin:0;
            }
            body
            {
                height:100%;
                margin:0; 
            }
        </style>
    
    <div style="height:100%; z-index:1">
    </div>

    有一点需要注意的是,Html级元素默认宽度是100%,即整行;但是高度并不是100%,而仅仅是一行而已。

    所以要想实现撑满整个页面,必须显式地设置高度为100%!

  • 相关阅读:
    前端经典书籍
    D3基本概念
    Array.map和parseInt的用法
    首屏和白屏时间计算
    css换肤总结
    文件上传总结
    js的uuid
    html5 drag事件用法
    shell脚本中的逻辑判断 文件目录属性判断 if特殊用法 case判断
    Mac vim“装逼”配置
  • 原文地址:https://www.cnblogs.com/yingsong/p/6101488.html
Copyright © 2011-2022 走看看