全高容器无边框折叠 - HTML＆amp; CSS

Question

我正在尝试使用一系列100％.container div（每个div都有自己的div）创建一个页面，从而产生一个长单页设计。但是，当我从.container移除边框时，它们都会崩溃。

有人知道为什么会这样吗？

  .container {

        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: block;
        border: 1px solid salmon;

    }

html, body {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    font-size: 10pt;
    letter-spacing: 1px;
    /* overflow: hidden; */
}

编辑：我已将.container从display:block;更改为display:inline-block;，这解决了问题。有谁知道为什么会这样？

Answer 1

用户 splattne 对类似问题进行了解答。

====

想象一下<span>中的<div>元素。如果您为<span>元素指定高度为100px且红色边框，例如，它将如下所示

显示：内嵌

显示：内联块

显示：阻止

代码：http://jsfiddle.net/Mta2b/

更多信息：

display：block
这将导致div强制容器中的其他divs到新行，从而创建空间并折叠设计。

显示：内联块
它尝试在与div相同的一行显示divs，但由于您的所有divs都有width:100%所以它们看起来像是一个接一个地垂直，尽管它们是水平对齐的。