javascript - 如何在标准和怪异模式下将 div 放置在视口(viewport)底部?

标签 javascript position doctype fixed

我需要将一个 div 放置在视口(viewport)的底部。 我开始使用position:fixed;底部:0px;效果很好。 但我正在做的事情是通过 javascript 注入(inject)到不同的页面中的。并且某些页面没有定义 doctype,因此在 IE 中会像怪异模式一样呈现,因此 div 无法正确定位..
我尝试使用 javascript (document.documentElement.clientHeight) 定位 div,效果很好。但是,当未定义 doctype 时,“document.documentElement.clientHeight”为 0,因此 div 再次无法正确定位。 关于如何解决这个问题有什么想法吗? 我只对 IE 7 和 8 感兴趣。

提前致谢 贡萨洛

最佳答案

虽然我同意评论指出您应该更好地确保每个页面都提供触发标准模式的(有效)文档类型(并且您不能即时更改它或渲染模式),但您可以使用 document.compatMode 测试您是处于标准模式还是怪异模式。此属性返回 CSS1Compat当使用前者或BackCompat时当使用后者时。

在标准模式下,您可以只使用 <div>position: fixedbottom: 0 (在 IE 7 和 8 中)。使用怪异模式时,您必须使用绝对定位的 <div>位于绝对定位视口(viewport)上方 <div> (其中 <body><html>height100% )。我现在太累了,无法写完整的示例,但你可以看看 this answer看看如何做到这一点。注意,在IE的怪异模式下document.body.clientHeight返回视口(viewport)的高度(另请参阅 Finding the size of the browser window )。

关于javascript - 如何在标准和怪异模式下将 div 放置在视口(viewport)底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2945229/

相关文章:

css - IE8 边框和填充 - 不像 IE7 和其他浏览器那样呈现

jquery - 即使我使用 &lt;!DOCTYPE>,如何设置 div 的高度(以 % 为单位)?

html - 是否每个带有 doctype 的 html 页面都需要互联网连接才能正确呈现页面?

javascript - 当页面已经加载时,如何在使用 javascript 创建元素后选择它?

单击时的Javascript切换动画

css - 如何建仓 :relative div centered vertically?

position - jquery鼠标位置相对窗口

javascript - 基于angular js中的当前持续时间绘制Rzslider?

javascript - 检测变量是否包含字母或数字javascript

javascript - 独立于父 scrollTop 位置更改子项的顶部/左侧位置