SkeletonでのCSSでsectionの高さが変わらない

Question

HTML・CSS初心者です。
フレームワークでの作成がレスポンシブデザインには良いと聞き、作成予定のサイトもシンプルなデザインのためSkeletonをチョイスしました。
Skeleton base templateをそのまま利用し、適宜変更していく方法で作成しています。
トップのhero部分のsectionの高さを変えたいのですが、うまくいきません。

基本的には http://getskeleton.com/examples/landing/
と同じ構成で、ワンカラム、画面いっぱいに画像を表示させる縦に長いランディングページを作成します。
section heroの下にintro や他のsection４〜５個もあるのですが、それらの高さは変わりました。

.section {
  text-align: center;
  height: 100vh;
}

これだけはトップのsectionの高さは変わらないのでしょうか？

・・・
  <div class="section hero">
    <div class="container">
        <div class="one-half column phone">
          <img class="phone" src="images/iphone.png">
        </div>
        <div class ="right-contents">
          <div class="one-half column">
            <h1 class="hero-heading">ヘッドコピー</h1>
          </div>
          <div class="three columns left-message">
            <h6 class="hero-subcopy">テキストテキスト</h1>
            <a class="button button-primary"  href="#">利用はこちらから</a>
          </div>
          <div class="three columns right-message">
            <h4 class="hero-subcopy">サブコピー的なもの</h1>
            <img class="qr" src="images/qr_sample.png">
          </div>
        </div>
    </div>
  </div>
・・・

/* NOTE
ベースが10pxなので1.5rem =15px) */

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
  border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  text-align: center;
  height: 100vh;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phone {
  max-width: 80%;
  margin: 3rem auto -12rem;
}

.hero {
  background-image: url('../images/top_catch.png');
  no-repeat fixed;
  background-size: cover;
  color: #25C7AD;
}

.hero-subcopy {
  top:10rem;
}

.hero-heading {
  position: relative;
}



/* Intro
–––––––––––––––––––––––––––––––––––––––––––––––––– */




/* Bus Position
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bus-position{
  background-image: url('../images/buses.jpg');
  background-size: cover;
}

/* Bus Route
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* Bus Operation Status
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bus-operation-status{
  background-color: #AEFFEE;
}

/* Any Device
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.devices {
  display:block;
  margin-left: auto;
  margin-right: auto;
}

.center {
  text-align: center;
}


/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  background-color: #17C0FF;
  margin-bottom: 10px;
  padding: 8rem 0 7rem;
  text-align: center;
}

p.footer-operation{
  color:white;
}
p.footer-inquiry{
  color:white;
}
p.footer-mail{
  color:white;
}



/* Media
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 400px) {
  .phone {
    position: absolute;
    top: 0.5rem;
    left: -1rem;
    max-height: 362px;
    z-index: 3;
  }

  .qr {
    max-height:50px;
  }

}

/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: 0.5rem;
    left: -1rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    left:2rem;
    z-index: -7;
    max-height: 640px;
  }
  .hero-heading {
    font-size: 3rem;
    margin-top: 4rem;
  }

  .qr {
    max-height:80px;
  }
}



/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 4.4rem;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }

  .phone {
    top: -8rem;
    left: 2rem;
    max-height: 720px;
  }

  .qr {
    max-height:120px;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 20rem 0 19rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 5.0rem;
    right: -5rem;
  }
  .phone {
    top: -11rem;
    max-height: 990px;
    left:5rem;
  }

  .qr {
    max-height:140px;
  }

}

Answer 1

レスポンシブということですが、端末・OS・ブラウザはどれで確認していますか？
未だvwやvhに対応していないものもあるので、たまたまそういうので見ているってことはないでしょうか？

あと、メディアクエリで.heroに対してheightを指定していますが、これは.sectionとセレクタの詳細度が同じで後から書かれているため上書きされているという可能性もありますね。
確認してみてください。

Comments

[masaakitsuyoshi]

macbook osx EIの最新
chrome　バージョン 52.0.2743.82 (64-bit)
です。

メディアクエリ削除したら、他のsectionは100vhのままでしたが、heroだけやはりサイズ変わらなかったです。確認方法合ってるでしょうか？

[NatsumiOki]

あ、お返事遅くなってしまいましてすみません…
解決されたようでよかったですヾ(*´∀｀*)ﾉ

Answer 2

.section.hero {
  height: 100vh;
}
```とか
```CSS
.section.hero {
  height: 100vh !important;
}
```とかで反応ありますか？

提示されているサイトでは `.section` のみで `height` が適用されたため、記述順か他の記述での上書き、またそのCSSが適用されていない（キャッシュやファイル自体の指定違い）なども確認してみてください。

Comments

[masaakitsuyoshi]

上のやつで反応しました！
なぜ他のsectionは反応したのに、heroだけ個別に指定しないと反応しないんでしょうか？？
記述順などが関係するのでしょうか。

他のsectionも、heroのsectionも同じcssファイルに書いています。

[kei344]

NatsumiOkiさんが書かれているように「セレクタの詳細度」の問題です。

【詳細度 - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

また、デベロッパーツール（開発者ツール）を使えば、どのCSSが適用されているかがわかりますので、一度調査してみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

[masaakitsuyoshi]

ご説明ありがとうございます。
一度目を通してみます！

ちなみに自分の環境だと、
.section.hero {
height: 60vh;
}
くらいで画面いっぱいにちょうど良いくらいでした。

100vhを指定したらどんなデバイスの画面サイズでもいっぱいに表示されるってわけでもないのでしょうか。
http://coliss.com/articles/build-websites/operation/css/css-make-full-screen-sections-by-ckor.html

[kei344]

.section にはパディングが設定されているので。要素の高さはpadding+border+heightです。
.section.hero {
box-sizing: border-box;
height: 60vh;
}
としたら高さが足りないはずです。
.section.hero {
box-sizing: border-box;
height: 100vh;
}
これでどうでしょう？

【CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary】
http://phiary.me/css3-box-sizing/

[masaakitsuyoshi]

>>.section にはパディングが設定されているので。要素の高さはpadding+border+heightです。

テンプレをコピペして使っていたのでなにが反映されてるのかしっかり把握してませんでした。。。

.section.hero {
box-sizing: border-box;
height: 60vh;
}
でちょうどいい感じでした。

.section.hero {
box-sizing: border-box;
height: 100vh;
}
だと少しはみ出ています。
モニターも変えてみましたが、60vhくらいがちょうどいいようです。

詳細度について目を通しましたが意味がなんとなくわかりました！
ただ、どこが詳細度が高いのか、いまいちわかっていないので少し難しそうです。

box-sizingみてみます！