Question

想象一下这个文件：

<!doctype html>
<head>
  <title>Leak</title>
</head>
<body>
  <div id="container">
   <div id="main">
     <ul>
        <li>a</li>
        <li class="b">b</li>
        <li>a</li>
        <li class="b">b</li>
        <li>a</li>
     </ul>
   </div>
   <div id="footer">
     <div>Footer</div>
     <div style="height: 50px; width: 50px; background: red"/>
   </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</body>
</html>

用萤火虫的铬打开它，你会看到，身体元素上有一些无法解释的边缘顶部。它来自ul元素，更深层次。我认为这是一种非常轻松的行为，但我确信那些提出这个问题的wc3家伙有充分的理由。

但是怎么样，我可以在javascript中找到它吗？我需要将#main div的高度设置为$（window）.height（） - $（'＃footer'）。height（），所以#footer总是在底部。

$('#main').height($(window).height() - $('#footer').height())

但这留下了一个滚动条，因为顶部有这个空间。尝试删除ul，一切都按预期。我怎么能解释这个？这是一个插件，所以我无法考虑特殊标记，这应该“正常工作”。

Answer 1

它的工作原理是将“overflow：auto”设置为拉伸的div，在本例中为#main。它不是一个JavaScript解决方案，但在某种程度上是可以接受的。我可以让用户决定是否应该应用此修复程序，否则他可以解决此问题。

Answer 2

不，保证金来自身体元素。每个浏览器默认生成此项。只需添加body：margin：0;填充：0;摆脱它。

Answer 3

只需应用重置css，这是处理浏览器不一致的常见做法。某些浏览器应用默认填充，其他浏览器应用默认边距。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}

当内部元素“泄漏”它们的边缘时，我怎样才能获得外部元素的正确高度？

3 个答案: