全高骨架样板

Question

我试图让每个部分标签的高度都为 100%，但它不起作用。

这是我的 html 代码：

  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <section>
          <h4>Basic Page</h4>
          <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
        </section>

      </div>
    </div>
  </div>

CSS代码：

section {
    height: 100%;
    background-color: #ccc;
}

skeleton.css 和 normalize.css 已下载

Answer 1

height: 100%; 相对于父级的 height。这意味着如果你没有设置父元素'height，100% of undefined, is undefined.

您需要为 .twelve 元素设置显式 height（如果是 %，则为它的父元素等等）。

另请参阅：

height: 100% not working

CSS height 100% percent not working

Answer 2

您应该将 html, body {height: 100%;} 然后 .container 设置为 100%，然后将 section 的定位设置为绝对，因为百分比高度是相对于其计算的parent/container.

您可以将您的部分设置为 height: 100vh; 以实现此目的。请注意填充和边距，因为该部分可能会比视口更大。 :)

Made a jsbin。 *没有骨架

我认为这与'skeleton'没有任何关系。

This 是理解 css 个单元的最佳视频。

全高骨架样板

Full height with skeleton boilerplate

html

css

responsive-design

skeleton-css-boilerplate