文档章节

CSS高度自适应 height:100%;

o
 osc_1ee7cxmx
发布于 2018/08/06 18:35
字数 419
阅读 0
收藏 0

在初次尝试高度自适应时都会遇到这样的问题:
对象的heith:100%; 并不能直接产生实际效果

为什么呢?
之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>一列布局</title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }/*这里是关键*/
            
            #layout {
                background-color: #cccccc;
                /*border: 2px solid #333333;*/
                margin: 0 auto;
                width: 80%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="layout"></div>
    </body>

</html>

一个对象的高度是否可以使用百分比显示,取决于对象的父级对象.在页面中,#layout 是直接放置在body之中,因此它的父级对象
是body,在默认状态下,浏览器并没有给bodyy一个高度属性,因此我们所设置的#layout为height:100%;并不会产生任何效果.但是
一旦我们给body设置了100%之后,它的子级对象#layout 的height:100%;便发生了作用了,这便是浏览器解析规则引发的高度自适应
问题.

  代码中除了给body定义了100%之外,还给html对象也应用了想吐的样式定义,这样做的好处是,使用IE与firefox浏览器都能够实现
高度自适应,IE与firefox对页面对象的解析方式存在一定差异.在IE中,html对象默认为100%的高度,body却不是.而在firefox中,
html标签却不是100%高度,因此我们给两个标签都定义为height:100%;,这样可以保证两款浏览器下均能够正常工作.

 

注:float元素 空白边不叠加

上一篇: 跨域
下一篇: java--异常
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Vue-插槽slot/具名插槽

插槽的基本使用: <div id="app"> <cpn> <span>我是替换slot的元素1</span> </cpn>------------------------------------- <cpn2> <span>......

心田已荒
14分钟前
6
0
标准Android按钮具有不同的颜色 - Standard Android Button with a different color

问题: I'd like to change the color of a standard Android button slightly in order to better match a client's branding. 我想稍微更改标准Android按钮的颜色,以便更好地匹配客户的品......

技术盛宴
32分钟前
24
0
如何在Ruby中生成随机字符串 - How to generate a random string in Ruby

问题: I'm currently generating an 8-character pseudo-random uppercase string for "A" .. "Z": 我目前正在为“ A” ..“ Z”生成一个8个字符的伪随机大写字符串: value = ""; 8.times{......

法国红酒甜
今天
20
0
原价500元的认证证书,限时免费考取!

本文作者:y****n 百度云智学院致力于为百度ABC战略(人工智能、大数据、云计算)提供人才生态体系建设,包括基于百度ABC、IoT的课程体系,整合百度优势技术能力的深度学习技术、Apollo无人车...

百度开发者中心
昨天
17
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部