`

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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
后就和没有用height:100%一样了,后来发现要给html,body都增加height:100%的属性,这是高度自适应问题的关键所在。 

复制代码
代码如下:

html,body{ 
margin:0px; 
height:100%; 


    一个对象高度是否可以使用百分比显示,取决于对象的父级对象,Table在body之中,因此它的父级是body,而浏览器默认状态下,是没有给body一个高度属性的,因此当我们直接设置#left为height:100%;时,不会产生任何效果,而当我们给body设置了100%之后,它的子级对象Table的height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外,还给 HTML对象也应用相同的样式设计,这样做的好处是使IE与firefox浏览器都能够实现高度自适应。另外,Firefox中的HTML标签不是 100%高度,因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。

分享到:
评论

相关推荐

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

    通过以上分析可以看出,该方案能够很好地解决IE6等浏览器中`div`元素100%高度填充的问题。尽管现代Web开发已经很少使用IE6,但了解这些技术细节对于理解Web布局的历史发展以及兼容性问题仍然具有重要意义。

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。同时,在浏览器兼容性方面也存在一定的漏洞。...

    DIV 高度 自适应

    在W3C标准盒模型中,元素的总高度等于`height` + `border` + `padding` + `content height`,而在IE的老版本(Quirks模式)中,元素高度仅包含内容高度。理解这两种盒模型的区别对于实现自适应高度至关重要。 2. **...

    div背景全屏自适应

    height: 100%;"&gt; 内容 ``` #### 四、注意事项 1. **图片质量**:选择高分辨率的图片以保证在大屏幕上也能清晰显示。 2. **性能优化**:避免使用过于复杂的背景图,减少加载时间。 3. **兼容性问题**:...

    发布网页版Unity自适应网页大小2

    首先,我们要明确一点:Unity中的PlayerSettings设置的width和height参数并不直接影响网页的自适应效果。这些设置通常用于定义Unity场景在原始分辨率下的大小,但它们不会自动调整网页容器的大小以适应不同的浏览器...

    iframe 自适应高度[在IE6 IE7 FF下测试通过]

    `document.frames`用于处理IE浏览器,而`contentDocument`则是W3C标准中的属性。`body.scrollHeight`用于获取文档主体的高度,确保`iframe`高度适应内容高度。 ### 第二种方法 第二种方法同样利用JavaScript,但...

    iview table高度动态设置方法

    iview Table 高度动态设置方法 iView 是一个基于 Vue.js 的组件库,它提供了许多实用的组件来帮助开发者快速构建应用程序。其中,iView Table 是一个非常常用的组件,用于显示表格数据。然而,在使用 iView Table ...

    CSS自适应宽度圆角按钮

    CSS自适应宽度圆角按钮 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html &lt;head&gt; &lt;meta ...

    css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码

    这种方法虽然解决了IE6的问题,但`expression`并非W3C标准,可能会降低页面性能,因此,除非必要,不建议在现代网页中使用。 总结来说,CSS的`max-width`属性是控制图片自适应宽度的标准方法,适用于大部分现代...

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    但是,Iframe 的高度自适应问题一直困扰着前端开发者,因为被嵌套页面的高度可能随着内容变化而动态变化,导致无法固定一个合理的高度。 #### 同域情况下 Iframe 高度自适应 当主页面与被嵌套的 Iframe 页面属于...

    最全的CSS浏览器兼容问题

    DOCTYPE html&gt;`,以确保W3C标准的遵循。不添加DOCTYPE会导致浏览器进入怪异模式,CSS行为可能与预期不符。 2. **div的垂直居中问题**: 在CSS中,要实现div内容的垂直居中,一种常见方法是设置行高(line-height)...

    前端界面进行自适应布局之positon属性使用

    最近使用position属性进行界面布局,在以后的开发中将要经常使用,便于以后使用方便特别把样式写在这里: 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD ... height:100%;”&gt; &lt;head&gt; &lt;met

    w3c html语言大全

    在这个名为“w3c html语言大全”的压缩包中,我们可以期待找到一系列关于HTML的详细学习资料,包括但不限于基本语法、元素、属性以及最新的HTML5特性。 1. **HTML基础**: HTML由一系列元素组成,每个元素都有其特定...

    DIV+CSS浏览器兼容问题解决方法

    为了确保W3C标准的遵循,应在文档开头添加DOCTYPE声明,例如`&lt;!DOCTYPE html&gt;`,这对于CSS的解析至关重要。在Web2.0过渡期间,推荐使用XHTML格式编写代码,因为它更接近XML标准,有助于提高浏览器兼容性。 2. **...

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

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

    CSS多浏览器兼容性[定义].pdf

    6. **宽度和高度问题**:IE不识别`min-`前缀,因此`min-width`和`min-height`可能不起作用。解决方法是使用条件注释或HTML5的`&lt;html&gt;`元素下的`&lt;div&gt;`,结合CSS表达式,如`#container{ min-width: 600px;width:...

    让flash自适应浏览器分辨率(网页flash全屏代码)[借鉴].pdf

    在网页开发中,经常会遇到 Flash 元素无法自适应浏览器分辨率的问题,本文将详细介绍如何让 Flash 自适应浏览器分辨率,并实现网页 Flash 全屏显示。 Flash 自适应浏览器分辨率的原理 要让 Flash 自适应浏览器...

Global site tag (gtag.js) - Google Analytics