height:100%を使用してボーダーで囲む
下記のソースのボーダー代替で使用している部分
body { padding: 5px 5px 0 5px; background:#000; }
.container:last-child { border-bottom: solid 5px #000; }
を削除し
body { border: solid 5px #000; }
もしくは他の要素を追加で
ボーダー(border: solid 5px #000;)で表示させること出来ないでしょうか？
*#headerを画面一杯に表示させたいのでhtml,body,#headerにはheight:100%,width: 100%;を掛けています。
*HTMLソース
(インデントの代わりにアンダースコアを使用しているので戻してください)
<body>
__<div id="header" class="container">
____<div class="inner">
______<header>
________<p>Header</p>
______</header>
____</div>
__</div>
__<div class="container">
____<div class="inner">
______<section>
________<p>Section-1st<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
______</section>
____</div>
__</div>
__<div class="container">
____<div class="inner">
______<section>
________<p>Section-2nd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
______</section>
____</div>
__</div>
__<div class="container">
____<div class="inner">
______<section>
________<p>Section-3rd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
______</section>
____</div>
__</div>
__<div id="footer" class="container">
____<div class="inner">
______<footer>
________<p>Footer<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
______</footer>
____</div>
__</div>
</body>
*CSSソース
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
}
body {
padding: 5px 5px 0 5px;
background: #000;
}
.container {
width: 100%;
height: auto;
background: #fff;
}
.inner {
max-width: 960px;
width: 100%;
height: auto;
margin: 0 auto;
}
.container:first-child {
width: 100%;
height: 100%;
background: #3498db;
}
.container:last-child {
border-bottom: solid 5px #000;
}
お礼
早々の回答ありがとうございます。早速、友達に言ってみいます