`
hwpok
  • 浏览: 251694 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

为什么用了w3c标准height:100%不起作用

    博客分类:
  • Html
阅读更多
看一下这段高度自适应的CSS代码:
html,body{
      margin:0px;
      height:100%;
}

#left {
      background-color:#CCC;
      width:300px;
      height:100%;
      float:left;
}
      代码已经到了不能再简单的地步,对#left对象设置了height:100%;,然而也能够看见,同时设置了HTML与body的height:100%;,而这个就是高度自适应问题的关键所在。
分析:
      一个对象高度是否可以使用百分比显示,取决于对象的父级对象,#left在页面中直接旋转在body之中,因此它的父级是body,而浏览器默认状态下,是没有给body一个高度属性的,因此当我们直接设置#left为height:100%;时,不会产生任何效果,而当我们给body设置了100%之后,它的子级对象#left的height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外,还给HTML对象也应用相同的样式设计,这样做的好处是使IE与firefox浏览器都能够实现高度自适应,而body却不是。另外,Firefox中的HTML标签不是100%高度,因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。
分享到:
评论

相关推荐

    w3c标准自适应高度height100%不起作用的问题分析

    在以前的网页中,table用height:100%是可以整屏的,但在网页头部增加: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...

    关于table的width:100%和margin导致溢出

    浏览器默认采用的标准盒模型(W3C Box Model)就是这样计算的,但可以通过`box-sizing`属性来改变这一行为,使其使用IE盒模型(IE Box Model),其中`width`包含了`padding`和`border`。 总的来说,理解`width:100%...

    IE6等div 100%高度填满解决办法

    }` 使用`min-height`属性确保容器高度至少为100%。 - `*html #container { height: 100%; }` 利用IE6特有的`*html`选择器来进行特殊处理。 通过以上分析可以看出,该方案能够很好地解决IE6等浏览器中`div`元素100%...

    W3C标准 W3C代码标准规范

    ### W3C标准详解 #### 一、W3C标准的目的与重要性 W3C(World Wide Web Consortium,万维网联盟)是一国际性的组织,致力于制定互联网标准,确保Web技术的兼容性和互操作性。W3C标准的目的在于为Web开发提供一套...

    W3C 标准 深入 体验

    ### W3C标准深入体验知识点解析 #### 一、W3C介绍 - **W3C组织**: W3C(World Wide Web Consortium)即万维网联盟,是一个国际性的标准化组织,致力于制定并推广Web技术的标准。W3C的目标是确保Web技术能够长期...

    浏览器CSS方面兼容手册.txt

    在IE6及以下版本中,使用`clear:both`可能不起作用或效果不明显。 **解决方法:** 为了确保所有浏览器下都能正确清除浮动,可以使用下面的CSS代码: ```css .clear_both { clear: both; height: 0px; font-size:...

    符合W3C标准的对联广告JS

    本文将深入探讨如何使用JavaScript(JS)来创建一个符合W3C标准的对联广告,这是一种常见的网页广告形式,通常出现在页面两侧。 首先,我们需要理解对联广告的基本结构。对联广告通常由两个等宽的矩形广告位组成,...

    符合W3C的漂浮广告代码.txt

    ### 符合W3C标准的漂浮广告代码解析 #### 一、W3C标准简介 W3C(World Wide Web Consortium)是国际万维网联盟,它制定了一系列的标准来确保Web技术的兼容性和互操作性。这些标准涵盖了HTML、CSS、XML等多个方面,...

    WEB前端开发必备之浏览器兼容性处理方法大全[借鉴].pdf

    * 高尽量用padding,慎用margin,height尽量补上100%, * 父级height有定值子级height不用100%, * 子级全为浮动时底部补个空clear:both的div, * 宽尽量用margin,慎用padding,width算准实际要的减去padding。 八...

    DIV+CSS设计时浏览器兼容性问题.pdf

    important`在这里不起作用。这就引出了CSS Hack的方法。CSS Hack是通过特定的语法结构来针对不同浏览器应用样式。例如: - `_height: 100px;` 仅适用于IE6 - `*+height: 100px;` 仅适用于IE7 - `*height: 100px;` ...

    关于梅花雨日历不同页面标准下的显示问题

    关于梅花雨日历不同页面标准下的显示问题 <br>标准一...是不认可的,但是第二种标准是两种都可以的,由于我的DW默认生成标准一的头,所以在用梅花雨日历时设置的iframe宽度不起作用,才发现这个问题,现已修正。

    CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

    首先,要确保网页遵循W3C标准,使用XHTML格式编写代码,并添加DOCTYPE声明。DOCTYPE声明有助于浏览器正确解析页面,避免由于不同的渲染模式导致的兼容性问题。例如,使用XHTML 1.0 Transitional DOCTYPE声明如下: ...

    符合W3C网页标准的iframe标签的使用方法

     直接使用”IFRAME”不符合”W3C网页标准” 用JS来实现iframe 的标准化. 一、建立一个JS文件,代码如下: 代码如下:function ifr(url,w,h){[removed](‘<iframe id=”ifr” name=”ifr” width=”‘+w+'...

    CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器

    在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: HTML4STRICT代码: ...

    Cascading-Style-Sheets-UNC-A完整.pptx

    CSS的发展可以追溯到1996年,CSS 1.0成为W3C的推荐标准。1998年,CSS 2.0发布,并在2003年发布了修订版。 基本HTML页面 一个基本的HTML页面由 `<html>`、`<head>`、`<title>`、`<body>` 等标签组成。其中,`<head>...

    前端 50 道面试题及答案.docx

    - 标准盒子模型(W3C标准):元素的宽度等于内容宽度(content)加上边框(border)和内填充(padding),再加上外边距(margin)。 - 低版本IE盒子模型(IE传统):元素的宽度等于内容宽度(content+border+...

    右下角弹框

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` - 这行代码指定了当前文档遵循XHTML 1.0 Transitional标准。 2. **基本HTML元素**...

    web浏览器兼容

    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ``` 这将使得IE7以标准模式解析页面,减少兼容性问题。 5. **使用CSS reset** 使用CSS reset文件消除...

Global site tag (gtag.js) - Google Analytics