`
uule
  • 浏览: 6352908 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

css高度自适应的问题

    博客分类:
  • CSS
 
阅读更多

对象height:100%并不能直接产生效果,是因为跟其父对象有关

#center{
height:100%;
}

上面的css样式是无效的,不会产生任何效果。

需要改写:

html,body{
    margin:0px;
    height:100%;
}
#center{
width:200px;
height:100%;
background-color:#666666;
border:1px solid red;
}

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

  代码中除了给出body的定义属性之外,还给html对象也应用了相同的样式定义,这样做的好处是使IE与firefox浏览器都能够高度自适 应,Ie与firefox对页面的解析存在一定的差异,ie中html对象默认为100%的高度,而body不是,而在firefox中html标签就不 是100%的高度,因此两个标签都设置为100%,可以保证两款浏览器都能正常工作。

分享到:
评论

相关推荐

    div+css高度自适应

    ### div+css高度自适应详解 #### 一、引言 在前端开发中,随着屏幕尺寸的多样化以及响应式设计的需求日益增长,实现元素的高度自适应成为了一个重要的课题。高度自适应不仅能够确保页面在不同设备上的良好展示,还...

    研究了一下div+css的高度自适应问题

    CSS 高度自适应问题解决方案与实现方法 在 Web 开发中,div 元素的高度自适应问题是一个常见的问题,特别是在需要实现上下两个 div 元素高度自适应的情况下。这篇文章将讨论 div + CSS 高度自适应问题的解决方案和...

    子div含float,父div高度自适应的div+css布局写法

    div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight

    CSS3自适应浏览器页面框架布局代码

    本资源“CSS3自适应浏览器页面框架布局代码”旨在帮助开发者创建适应各种屏幕尺寸和设备的网页,确保在不同浏览器上的一致显示效果。 首先,CSS3中的媒体查询(Media Queries)是实现自适应布局的关键。媒体查询...

    2列左窄右宽高度自适应且未知高度底部平齐CSS模板

    总结起来,要创建一个“2列左窄右宽高度自适应且未知高度底部平齐”的CSS模板,需要熟练运用Flexbox布局,以及理解如何处理高度自适应和底部对齐的问题。这个模板对于构建响应式网站非常有用,能够适应不同设备和...

    css 高度自适应的问题示例探讨

    总之,要实现CSS高度自适应,关键在于理解百分比高度的计算依赖于父元素的高度,并确保所有相关的祖先元素都有明确的高度设定。在实际应用中,根据项目需求和浏览器兼容性选择合适的方法,可以有效地解决高度自适应...

    CSS3自适应手机布局

    CSS3自适应手机布局就是解决这一问题的关键技术。它允许网页在各种设备上,包括桌面、平板电脑和手机,都能呈现出良好的视觉效果和用户体验。本篇文章将深入探讨CSS3自适应手机布局的相关知识点。 首先,我们了解下...

    css控制宽度(高度)自适应100%

    高度自适应100%常用于实现全屏布局,例如“头、身体、脚”的页面结构。为了使元素高度填充整个屏幕,可以使用CSS的`vh`单位(viewport height,视口高度): ```html <!DOCTYPE html> html, body { margin:...

    CSS实现自适应的图片背景边框

    "CSS实现自适应的图片背景边框"这个主题就是针对这一需求展开的。 首先,我们需要理解CSS中的`background-size`属性。这是一个关键的属性,用于设置背景图片的大小。默认值是`auto`,这意味着图片会按照自身的原生...

    根据图片大小自适应的CSS

    在探讨“根据图片大小自适应的CSS”这一主题时,我们深入分析了如何利用CSS(层叠样式表)来确保图片能够根据不同设备和屏幕尺寸自动调整其大小,从而实现响应式设计的效果。以下是对该主题的详细解析: ### 一、...

    html2canvas生成pdf(html高度自适应带iframe)

    总之,`html2canvas`和`jspdf`结合使用可以实现网页到PDF的转换,但需要解决`iframe`、滚动条、背景颜色和高度自适应等问题。开发者需要理解这两个库的工作原理,并根据实际需求进行适当的配置和优化。在处理复杂...

    门户窗口高度自适应插件

    在Web开发领域,门户窗口高度自适应插件是至关重要的工具,它确保了网页内容能够根据用户设备的屏幕尺寸和窗口大小自动调整布局,提供良好的用户体验。随着移动设备的普及,响应式设计已经成为现代Web开发的标准,而...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe高度自适应

    总结,`iframe`高度自适应是前端开发中的常见问题,解决这个问题需要根据实际情况选择合适的方法,包括利用CSS、JavaScript、`window.postMessage` API,以及处理IE浏览器的兼容性问题。在实际操作中,一定要注意...

    解决Layui 表格自适应高度的问题

    鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css  <style> .layui-table-cell{ display:table-...

    CSS3自适应浏览器大小导航代码.zip

    例如,媒体查询(Media Queries)是CSS3中用于实现响应式设计的核心工具,可以根据设备的物理特性,如宽度、高度以及颜色深度等来应用不同的样式规则。 在这个代码示例中,"jiaoben6246"很可能是实现响应式导航菜单...

    html嵌入html,高度自适应,标签切换。

    总的来说,这个项目展示了HTML、CSS、JavaScript和pym.js库的结合应用,用于创建一个高度自适应且具有页面切换功能的嵌入式网页框架,这对于移动设备和桌面设备的用户体验都有积极的影响。这种技术在现代网页开发中...

    CSS强制图片自适应大小.rar

    标题"CSS强制图片自适应大小.rar"揭示了我们今天要探讨的核心技术,即如何利用CSS来让图片根据容器大小进行自适应调整,确保无论图片原始尺寸如何,都能在网页中以580px的最大宽度展示。这在响应式设计中尤其重要,...

    textarea高度自适应js代码

    为了解决这个问题,我们可以使用JavaScript或者jQuery来实现textarea的高度自适应功能,即根据textarea内的内容动态调整其高度,确保内容始终可见。 `textareaAutoHeight.jquery.js` 是一个基于jQuery的插件,它的...

Global site tag (gtag.js) - Google Analytics