CSS 中的出血是如何工作的？答案

【问题标题】：How does bleeding works in CSS?CSS 中的出血是如何工作的？
【发布时间】：2013-10-16 11:38:53
【问题描述】：

我最近阅读了“圣杯”设计并阅读了它的实现。

我看到了一个解决方案，它从侧面对菜单做了一些奇怪的事情。

{ 

    margin-bottom: -3200px;
    padding-bottom: 32000px;
}

我理解这种机制导致菜单“无限”，我还发现这个技巧叫做出血。

我不明白它是如何工作的。谁能解释一下？

编辑：

两个答案都很棒。希望我能选择 2。选择第一个回答。我发现了另一个强调负边距值的资源，它也解释了出血。 http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

谢谢。

【问题讨论】：

标签： css

【解决方案1】：

Padding-bottom 在该值下将菜单的背景向下拉伸得足够远，以至于总能看到它占据了整个页面的长度。边距调整使您能够根据您的网站设计将内容仍然定位在这个展开的菜单上的位置。这是一个调整了属性的示例，以便您可以更轻松地查看正在发生的事情：

http://jsfiddle.net/PVKbp/23/

 .two
    {

   margin-bottom: -3200px;
    padding-bottom: 32000px;
    margin-left: 100px;
    margin-right: 100px;
    background-color: #aaaaaa;   
}

【讨论】：

【解决方案2】：

Bleed 在印刷中，您可以在其中创建一个有意延伸到画布边界的设计，以确保覆盖所有页面。这基本上意味着您的设计没有正确“适合”文档的地方不会出现任何狡猾的白色边缘：

http://www.duggal.com/connect/wp-content/uploads/2010/08/bleed2.jpg

我想在这种情况下出血的想法是相同的，您试图通过向菜单添加填充来覆盖任何潜在的空白

CSS

我听说过的 CSS 中唯一的“圣杯”是 3 列？如果是这种情况，我会说填充 32000px 将是不必要的资源密集型

我从来没有真正创造出 100% 高度响应的东西，所以这里有一个很好的资源：@987654323@

【讨论】：

好的，所以您正在尝试创建一个 3 列布局，其中所有列的高度都相同？我想您希望它具有半响应性，因为这些列会适应视口的高度？