html - 全高容器无边框折叠 — HTML 和 CSS

Question

我正在尝试创建一个包含一系列 100% .container 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 和红色边框，它看起来像这样

显示:内联

显示:内联 block

显示: block

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

更多信息:

display: block
它会导致div给力其他divs在一个容器内移动到一条新线上，从而创造空间和折叠设计。

display: inline-block
它试图显示 div与其他人在同一行 divs但因为你所有的divs有width:100%所以它们在垂直方向上看起来像一个接一个，尽管它们是水平对齐的。