边距底部不适用于 %100 div答案

【问题标题】：Margin bottom not working on %100 div边距底部不适用于 %100 div
【发布时间】：2011-08-03 10:41:30
【问题描述】：

我有以下html代码：

<html>
 <body style="margin:0px; padding:0px;">
   <div id="outer" style="height:100%;">
     <div id="header" style="height:40px; background:blue;">Header</div>
     <div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
        <p style="height:1000px">Main</p>
     </div>
   </div>
 </body>
</html>

我只希望垂直滚动显示在主 div 中的内容超出可视区域时，似乎主 div 上的 margin-bottom 不起作用。

谁能帮我解决这个问题？

【问题讨论】：

垂直滚动条和margin-bottom有什么关系？
您的代码不会产生滚动条，即使内容数量荒谬：jsfiddle.net/r7JgK/2
我发布了新代码，请检查。我希望这个页面像一个 web 应用程序一样运行，其中主 div 始终位于可视页面的 100%，但由于标题是 40px 高，当主 div 中的内容超出可视区域时，我总是会得到双垂直滚动条。
请参考此网址jsbin.com/uvigo5/2。

标签： html scrollbar margin

【解决方案1】：

实际上，您似乎解决了错误的问题。如果你只是想去掉body本身的滚动条，将body的样式设置为overflow:hidden。

<html>
  <body style="margin:0px; padding:0px;overflow:hidden;">
   <div id="outer" style="height:100%;">
     <div id="header" style="height:40px; background:blue;">Header</div>
     <div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
        <p style="height:1000px">Main</p>
     </div>
   </div>
 </body>
</html>

这应该可以解决边距问题，然后您所要做的就是保持尺寸正确。

【讨论】：

请注意，如果您没有正确设置下边距，内部滚动条的底部将移动到页面底部以下，您将无法到达它，因此请务必考虑添加到 CSS 中的所有内边距、边距和边框。我会避免将上述任何内容添加到main，而是在需要时将此类声明添加到main 的内容中。
感谢您的帮助，但这并不能解决我的问题，我需要正确放置内部滚动条，标题高度仍将主 div 向下推到页面底部之外。 (jsbin.com/epuxi4)。有没有办法避免这种情况？
哦，我明白了。主要元素的定位绝对可以做到这一点。见jsbin.com/epuxi4/5