Question

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

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

{ 

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

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

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

编辑：

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

感谢。

Answer 1

在该值下填充底部，将菜单的背景向下拉得足够远，以至于总是看到占据整个页面的长度。边距调整使得能够根据您网站的设计将内容定位在这个展开菜单的某个位置。以下是调整属性的示例，以便您可以更轻松地查看发生的情况：

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

 .two
    {

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

Answer 2

打印中的

Bleed是您创建有意扩展到画布边界的设计的地方，以确保覆盖所有页面。它基本上意味着你的设计不能正确“适合”文件，你不会得到任何狡猾的白边：

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

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

<强> CSS

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

我从未真正创造过100％身高反应的东西，所以这里有一个很好的资源：Twitter Bootstrap2 100% height responsive

如何在CSS中出血？

2 个答案: