页面底部在页面之间不匹配答案

【问题标题】：Bottoms of the page do not match across pages页面底部在页面之间不匹配
【发布时间】：2011-05-13 05:05:37
【问题描述】：

我有两个使用相同 CSS 但看起来不同的页面。他们在这里：

128.48.204.195:3000
128.48.204.195:3000/formats

您可以看到在页脚下方，/formats 文件没有多余的空间，而另一个文件在页脚之后的底部有大约 50 像素的多余空间。你知道为什么会这样吗？据我所知，它们使用相同的 css。

这是我认为会影响这一点的 div 的 css：

div#container
{
    width:70%; /* Controls the with of the page */
    margin: auto; 
  float: middle;
    text-align:center;
    /*padding: 1%;*/
    border:1px solid #333;
    background-color:#eee;
}

div#header
{
  text-align:center;
  padding:10px;
}

谢谢！

【问题讨论】：

您实际上可以发布一个工作示例。您可能会发现人们不愿意关注您的开发机器的链接。
@Catfish 刚刚在我的问题中发布了 css sn-p
@Wes 你是说屏幕截图吗？是的，这可能就是我下次要做的。但它也需要使用萤火虫，所以点击链接是必要的。

标签： html css layout

【解决方案1】：

您在content css 类上设置了最小高度。这适用于您的包装器 div。删除或更改最小高度，它将摆脱多余的空间。

<div id="layout1" class="yui-t6 content">

【讨论】：

谢谢你——在调试这个时，你是怎么做到的？我正在尝试学习调试此类事情的最有效方法。
Chrome 开发者工具。我右键单击，检查了元素，检查了应用于它的 css 规则，注意到它具有最小高度，并将其更改为 1em，这很好。我曾怀疑是这样的。 Chrome 中的开发人员工具可以挽救生命。如果您使用 Firefox，请使用 Firebug。
使用 firefox 的 firebug 扩展。此外，您的正文标签中有元标签。它们应该在 head 标签中。
@Catfish 是的，我使用了 Firebug，但看不到这个特定的 css 元素正在搞砸页面。另外，您在正文中看到的元标记是什么？我错过了一些东西。我没看到。 - 谢谢
如果您查看源代码，您的<div id="header"> 标记内有几个元标记和许多脚本标记，但它们应该在您的<head> 标记内。

【解决方案2】：

问题出在这里：

<div class="yui-t6 content" id="layout1">


       <h1><center>Welcome to the UDFR Project</center></h1>
    <p></p>
    <p>Find me in app/views/home/index.html.erb</p>
    <p>    
    </p>
    <p>
      User Id (testing MySQL call): 1

    </p>

    <p>


  </p><div id="footer">
     <hr>
     <center>Team | About Us | Purpose | How You Can Help | CDL </center>
  </div> <!-- End of footer --> 

</div>

/formats 页面没有布局 div，因此它没有应用所有相同的 css 规则。具体影响底部的css规则在 .content {min-height: 20em;} 更改它以降低高度。

作为旁注，我认为您的目标更像是这样：

    <h1><center>Welcome to the UDFR Project</center></h1>
<div class="yui-t6 content" id="layout1">
    <p></p>
    <p>Find me in app/views/home/index.html.erb</p>
    <p>    
    </p>
    <p>
      User Id (testing MySQL call): 1

    </p>

    <p>


  </p> 
</div>
<div id="footer">
     <hr>
     <center>Team | About Us | Purpose | How You Can Help | CDL </center>
  </div> <!-- End of footer --> 

</div>

在页眉和页脚之间移动内容，而不是包含它们。

【讨论】：