100% Div 导致孩子的底部边缘被切断答案

【问题标题】：100% Div Causes Child's Bottom Margin to be Cut Off100% Div 导致孩子的底部边缘被切断
【发布时间】：2012-06-07 19:01:24
【问题描述】：

我有一个 100% 高度的#wrapper div。其中我有几个内容 div，每个都显示为内联块并有一个底部边距。问题是这个底部边距不知何故被折叠了。

用非常简单的代码就可以看出问题：

<div id="wrapper">
    <div id="content">
        <!-- lots of content here that will fill the browser window -->
    </div>
</div>

我创建了一个示例，可以在这里看到：http://jsfiddle.net/Y6tJw/

我感觉这是一个 webkit 问题，因为 Firefox 和 IE 都以适当的边距呈现页面。有什么帮助吗？

【问题讨论】：

标签： css margin

【解决方案1】：

不要问我为什么它会起作用，但这会起作用 http://jsfiddle.net/Y6tJw/2/

风格

#wrapper { height: 100%; background: blue; }
#innerwrap { padding-bottom:300px; background: blue;}

HTML

<div id="wrapper">
<div id="innerwrap">
<div id="content">
    <!-- lots of content here that will fill the browser window -->
</div>
</div>
</div>

【讨论】：

【解决方案2】：

发生这种情况是因为您使用min-height 为您的身体提供了 100% 的高度。尝试给height:auto;这会工作

【讨论】：