height:100%を使用して尚且つ全体をボーダーで囲みたいのですがうまくいきません
図Aの様に#headerから#footerをボーダーで囲みたいのですが、うまくいかず図Bの様になってしまいます(参照画像:http://i.imgur.com/w8eTvzL.jpg)
色々試してみたのですがどうする事も出来そうにありません
どうかお力をお貸しください
ソースは下記になります
<Style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
html, body {
width: 100%;
height: 100%;
}
#header.backgroundColor {
width: 100%;
height: 100%;
background: #3498db;
}
.backgroundColor {
background: #fff;
width: 100%;
}
body {
border: solid 5px #000;
}
/*
* 図Aでボーダーの代わりに使用
*/
/*body{
padding: 5px 5px 0 5px;
background: #000;
}
#footer.backgroundColor {
border-bottom: solid 5px #000;
}*/
</Style>
<body>
<div id="header" class="backgroundColor">
<h1>Header</h1>
</div>
<div class="backgroundColor" style="height: 100px">
<p>HogeHoge</p>
</div>
<div class="backgroundColor" style="height: 100px">
<p>HogeHoge</p>
</div>
<div class="backgroundColor" style="height: 100px">
<p>HogeHoge</p>
</div>
<div class="backgroundColor" style="height: 100px">
<p>HogeHoge</p>
</div>
<div id="footer" class="backgroundColor">
<h1>Footer</h1>
</div>
<body>
また質問がマルチポストになると思うのですがどうかご勘弁くださいませ
みんなの回答 2 件
.headerの上と.footerの下、各divの左右にそれぞれボーダー引くのはダメなの？
なんでマルチポストを了承しなくちゃいけないの？他の人の迷惑じゃん。
関連するトピックス