◆やりたいこと
wrapperに余白をつけ、その中でheaderを固定したい
◆問題になっていること
wrapperにmargin: 7px;
headerにposition:fixed,width:100%,を指定すると右に少しはみ出してしまう。
◆実現したいこと
wrapperにmargin: 7px;がついている状態で
position:fixed,width:100%をつけているheaderを中にいれて固定させたい。
下記の方法を試しましたが、
はみ出したままで変化はなかったです。
https://ginpen.com/2012/12/05/css-box-model/
html
1<html lang="ja"><head> 2 <meta charset="utf-8"> 3 <title>test</title> 4 <meta name="viewport" content="width=device-width"> 5 <style> 6 /* Header, Container, Footerの3つで構成 */ 7#wrapper { 8 background-color: #fff; 9 margin: 7px; 10/* Footerを下部に固定 */ 11 display: flex; 12 flex-direction: column; 13 min-height: 100vh; 14} 15 16/* ----- Header ----- */ 17/* Backgroundはシステムに毎に違う */ 18header { 19 height: 50px; /* headerの高さ */ 20/* Headerを上部に固定 */ 21 position: fixed; 22 z-index: 100; 23 width: 100%; 24} 25nav{background: #f5932a; 26} 27/* ----- container ----- */ 28.container { 29 margin-top: 50px; 30 display: flex; 31} 32 33/* ----- Footer ----- */ 34footer { 35 background:#333; 36 padding: 8px; 37 color:#fff; 38 font-weight: normal; 39 font-size: 85%; 40 text-align: center; 41/* Footerを下部に固定 */ 42 margin-top: auto; 43} 44 45 46 </style> 47 </head> 48 <body> 49 <div id="wrapper"><header><nav class="journal"><ul class="main-nav"><li><a href="#">test管理</a></li></ul></nav></header><div class="container"> 50<section class="mainContent"> 51 52<div class="section"> 53<div class="Block"> 54 55<p>テスト<br><br> 56 テスト<br><br> 57 テスト<br><br> 58 テスト<br><br> 59 テスト<br><br> 60</p> 61</div><!-- 左 終わり --> 62<!-- 右 --> 63</section> 64</div> 65<footer><small>Copyright © 2015; testtest</small><address></address></footer></div> <!-- End wrapper --> 66 67 </body></html>
回答2件
あなたの回答
tips
プレビュー