1

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

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

{ 

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

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

我不明白它是如何工作的。有人可以解释一下吗？

编辑：

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

谢谢。

4

2 回答 2

2

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

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

 .two
    {

   margin-bottom: -3200px;
    padding-bottom: 32000px;
    margin-left: 100px;
    margin-right: 100px;
    background-color: #aaaaaa;   
}
于 2013-10-16T11:54:54.167 回答
1

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

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

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

CSS

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

我从来没有真正创建过 100% 高度响应的东西，所以这里有一个很好的资源：Twitter Bootstrap2 100% 高度响应

于 2013-10-16T11:55:50.067 回答