ここから本文です

cssでレイアウトが崩れます。 何故かfooterがcd-scrolling-bgの1つ目まで上に上が...

bpt********さん

2016/9/2900:22:14

cssでレイアウトが崩れます。
何故かfooterがcd-scrolling-bgの1つ目まで上に上がってきます。
<main>タグで囲まなければずれないんですが…
どなたかご教授お願いします。

=html=
<header class="cd-header">
<nav class="cd-main-nav">
<ul>
<!-- inser more links here -->
<li><a href="#0">Home</a></li>
<li><a href="#0">test1</a></li>
<li><a href="#0">test2</a></li>
</ul>
</nav> <!-- cd-main-nav -->
</header>

<main>
<!--グループ1-->
<div class="cd-fixed-bg cd-bg-1">
<h1>タイトル</h1>
</div>
<div class="cd-scrolling-bg">
<div class="cd-container">
<p> 1つ目のコンテンツ</p>
</div>
</div>
<!--ここまで-->
<!--グループ2-->
<div class="cd-fixed-bg cd-bg-2">
<h2>タイトル</h2>
</div>
<div class="cd-scrolling-bg ">
<div class="cd-container">
<p> 2つ目のコンテンツ</p>
</div>
</div>
<!--ここまで-->
</main>

<footer>
<div class="cd-container">
<p> footerコンテンツ</p>
</div>
</footer>

=css=
body, html{
height: 100%;
}

main{
height:100%;
}

.cd-fixed-bg {
min-height: 100%;
background-color:#CF9;
}


.cd-scrolling-bg {
min-height: 100%;
background-color:#FF9;
}

footer{
height:100px;
background-color:#6F9;
}

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
58
回答数:
2
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

jam********さん

2016/9/2916:28:19

.cd-fixed-bg {
min-height: 100vh;
background-color: #CF9;
}
.cd-scrolling-bg {
min-height: 100vh;
background-color: #FF9;
}
footer {
height: 100px;
background-color: #6F9;
}

でいかがでしょう。
(body,html,mainの100%は不要)

質問した人からのコメント

2016/10/1 21:53:12

完璧です。
すごく助かりました!
vh が初耳で今後使っていきたいと思います!
ありがとうございました!

ベストアンサー以外の回答

1〜1件/1件中

kur********さん

リクエストマッチ

2016/9/2908:43:50

IE11で確認しましたが、質問者様が提示したソースコードでは、質問内容のような現象は確認できませんでした。
他にCSSを読み込んでいたりしませんでしょうか。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる