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%未定义。”

您需要为height元素设置明确的.twelve（如果是%，则为其父母等等。）

另见：

height: 100% not working

CSS height 100% percent not working

Answer 2

您应该将html, body {height: 100%;}然后将.container设置为100％，然后将section的定位设置为绝对值以达到该目标，因为百分比的高度是相对于其父/而计算的容器

您可以将您的部分设置为height: 100vh;来实现这一目标。请注意填充和边距，因为该部分可能比视口大。：）

Made a jsbin。 *没有骨架

我认为它与'骨架'没有任何关系。

This是了解css单位的最佳视频。

带骨架样板的全高

2 个答案: