-
ID:N8WUHW さんの質問

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 件

ID:XIPNsQ さんの回答

.headerの上と.footerの下、各divの左右にそれぞれボーダー引くのはダメなの?

ID:N8WUHW

ご回答ありがとうございます
出来るだけスタイルシートの記述を少なくしたいと考えていたのですが
他に方法が無ければ参考にさせていただきます

ID:AHWb4w さんの回答

なんでマルチポストを了承しなくちゃいけないの?他の人の迷惑じゃん。

ID:ccTp8q

マルチポストってどんな迷惑になんの?純粋に疑問

ID:jPrqK3

迷惑というか、不愉快じゃん?そう思わないの?そっちのほうが疑問やで。

ID:N8WUHW

某教えてサイトで質問させてもらったのですが思ったほど回答が無かったのでこちらのサイトで質問させたもらいました
ご迷惑をおかけして申し訳ございませんでした、今後は気をつけます

ID:RZQgM5

全くなんとも思わないけどな。なぜ不愉快になるのか全くわからない。

最終更新日:2014-10-14 (1,910 views)

関連するトピックス

ページ上部に戻る