###css height=100%に設定すると上に余白ができる
トップ画面で画面全体に背景画像を表示させたいのですが、上部に余白ができてしまいます。
初歩的な質問かもしれませんが、解決法を教えていただきたいです。
HTML
1<body> 2<section class="top" id="top"> 3 <h1 class="catchcopy">CATCH COPY</h1> 4</section> 5<footer class="footer"> 6</footer> 7</body> 8</html>
css
1@charset "UTF-8"; 2/* CSS Document */ 3 4html { 5 font-size: 62.5%; 6 height: 100%; 7} 8* { 9 margin: 0; 10 padding: 0; 11} 12 13*, *::before, *::after { 14 box-sizing: border-box; 15} 16 17body { 18 color: #fff; 19 font-size: 1.4rem; 20 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "sans-serif"; 21 height: 100%; 22 margin: 0; 23} 24 25.top, .top::after { 26 width: 100%; 27 height: 100%; 28 background: url(../img/top_background.png) no-repeat fixed left bottom; 29 background-size: cover; 30 margin: 0; 31 padding: 0; 32 display: block; 33} 34
私の環境(chrome)では再現せず、余白はできませんでした。できれば環境の明記と画面キャプチャでどこに余白が表示されているのかご提示いただけますか?
回答2件
あなたの回答
tips
プレビュー