Полная высота с шаблоном скелета

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;. Просто будьте осторожны с paddings и полями, так как раздел может увеличиться больше, чем область просмотра. :)

Made a jsbin. * без каркаса

• Я не думаю, что это имеет какое-либо отношение к «скелету».

This - лучшее видео для понимания единиц css.