浏览器自动设置内容 div 的高度答案

【问题标题】：Browser automatically setting height of content div浏览器自动设置内容 div 的高度
【发布时间】：2012-10-22 21:26:14
【问题描述】：

我使用 wordpress 生成了一个网站。该网站的页面内容包含在一个 div 中，如下所示：

<div id="content">
  <!-- content -->
</div>

作为参考，这里是css规则：

#content {
  background: white url('images/hatch-light.png') repeat;
  box-shadow: 0px 0px 2px #333;
  -moz-box-shadow: 0px 0px 2px #333333;
  -webkit-box-shadow: 0px 0px 2px #333;
  width: 760px;
  position: absolute;
  left: 200px;
  z-index: 15;
}

当我查看此来源时，我看到了这一点。但是，如果我检查内容元素使用 chrome，我会看到高度被插入到 div 样式中。我明白了：

<div id="content" style="height: 702px;">

高度是我的浏览器窗口的高度。我遇到的问题是内容 div 不再封装其内容（例如，内容 div 具有背景样式，并且此背景样式不再延伸到浏览器定义的高度以下）。

谁能告诉我如何防止浏览器设置高度？

【问题讨论】：

如果702 是您视口的高度，我猜是有一些 JavaScript 执行此操作。（高度怀疑 JS，IMO，因为正确的方法是添加 style="height:702px"）
也许可以尝试为 css 添加一个高度，看看会发生什么。如果它被覆盖，那么肯定是 kevin 所说的 js
如果是 js，解决它的唯一方法是更改 .js 或在您的 css 中使用 !important 来覆盖内联样式。
@MM 有没有你的wordpress网站的url，我们可以看看？
尝试 height:auto!important 虽然这不是一个好习惯

标签： html css

【解决方案1】：

感谢 Kevin Butcher 和其他评论者指出这一点。高度是由一段 javascript 插入的（height.js，你相信吗）。因此，它在检查元素时可见，但在查看源代码时不可见。

@chchrist 提供了一个解决方法（向 div 添加一个 height:auto!important 属性），同时我想出了如何从 wordpress 中删除脚本。

【讨论】：