调整大小时删除填充答案

【问题标题】：Padding erased when resized调整大小时删除填充
【发布时间】：2012-08-14 20:17:35
【问题描述】：

我有一个网站，前两页给我带来了问题。 http://www.readysetpixel.net/about.html 和 http://www.readysetpixel.net/faq.html

内容的内边距设置为 20 像素，当我将其设置为浏览器调整为 800 像素时，内容的最大高度会切换为 490 像素，如下所示。

<script type="text/javascript">
$(document).ready(function() {
   $(window).on('resize', function(){
     if ($(this).height() <= 800){
      $('.content').css('max-height', '490px'); //sets max-height
     } else{
  $('.content').css('max-height', ''); //deletes max-height
   }
 }).resize()
})
</script>

所有这些在 google chrome 中都可以正常工作，但在 Firefox 和 IE 中，由于某种原因，它们会忽略底部的填充。我已经尝试添加

  $('.pad').css('padding-bottom', '20px'); //sets padding

然后 delete 与 max-height 的方式相同，这将起作用，但它会在调整大小时为 google 提供额外 20px 的填充。

任何帮助将不胜感激。

更新：

sayhello 和比赛页面在做同样的事情。出于某种原因，当我将填充与表单一起使用时，它会在 Firefox、IE 和 chrome 中正确读取它。这很奇怪，因为如果我对前两页做同样的事情，它会给 chrome 额外的 20px 填充。

【问题讨论】：

您是否有理由使用 javascript 而不是 @media tags，这似乎是一个完美的用例，并且可能更清洁/更易于维护？ Padding 似乎在我的 Chrome v21、FF v14 和 Safari v6 中工作。
如何使用@media 实现我想要的。我以前试过但做不到。
@media screen and (max-height: 800px) { .content {max-height: 490px;} }
^^ 这就是我使用的，但它仍然做同样的事情。
我并没有提供它作为您的填充问题的解决方案......只是一个建议而不是所有的 javascript。我确实看到this article 听起来是一样的，看起来确实像一个错误，因为填充在那里（只是没有渲染）。

标签： jquery html css padding

【解决方案1】：

我确实认为这是一个渲染错误，因为边距底部没有被添加到高度计算中 (FF & IE Render Bug Article)。跨浏览器修复症状应该不会太难；您可以将高度计算向下移动一层（滚动层之外）。

<div class="scroll">
    <div class="content">
        <h1>...</h1>
        <div>...</div>
    </div>
</div>

.scroll 将负责height 和overflow；而.content 将负责width 和padding。不是最优雅的解决方案，但它会解决您的跨浏览器问题。

如果你想让我设置一个提琴手，请告诉我。

不相关的旁注：在检查完 CSS 之后，您的网站可能会受益于一些 OOCSS 方法（如果您担心这类事情，肯定会减少您的 css 文件的大小）。

【讨论】：