我正在努力提高构建响应式网站的效率，因为我使用的是Bootstrap（对于这种情况不是特别重要 - 我相信），我正在研究Bootsnipp。我决定查看网站的来源并注意到我以前从未见过的一件事：他们没有为任何容器设置高度，除了整个页面包装器和页脚。这让我感到困惑，因为一切都与网站一致，而且非常具有代表性。我理解他们使用像“col-sm-4”这样的Bootstrap类的元素，但是有没有人理解制作标题，内容容器等的艺术，而不是在css中指定高度？谁能解释这个概念？我尝试使用谷歌搜索，但不确定找到答案的正确关键字。
此外，如果您需要了解自己，here是其CSS的链接。
由于
答案 0 :(得分：4)
了解Box模型很重要。作为一个（过于简化的）经验法则，你可以这样想;有两种主要类型的元素：内嵌（span，b，strong，...）和阻止（{ {1}}，div，...）。
阻止标记默认为p。也就是说，它们会自然伸展以填充它们的水平区域。
内联标记视为收缩。他们shrik以适应他们内在元素的大小。当您想到一个粗体标记时，这是有道理的：它与突出显示您想要加粗的文本没有什么不同。它很小，适合内容。
但在这两种情况下，除非您指定width: 100%，否则阻止和内嵌标记都会缩小其height以适合其内在元素。因此，您可以将网站视为一堆堆叠在一起的元素，其中页面的顶部是“堆栈”的底部。
以下是没有指定高度的div的示例，其高度根据内部内容的大小而改变。 http://jsfiddle.net/S3q2C/请注意，所有div都有边框，可以轻松查看其相对大小。
答案 1 :(得分：1)
如果未设置显式高度，容器将自动增长以适合内容（分别）。有时这是可取的，有时则不是（想想溢出隐藏）。人们在容器中使用明确高度的一个可能原因可能是因为绝对定位，或者他们想要对齐高度为50px的嵌套元素，而另一个高度为200px的嵌套元素。显式高度也可用于维护图片或其他元素（可能是一系列元素）的透视图。虽然这个答案结束了所有你可能正在寻找的东西，但我试图传递的关键是在需要时使用显式高度，而不是所有时间。
这是一个快速演示，显示两个<div>个容器，一个有高度设置，另一个没有高度。