height:100%を使用してボーダーで囲む

締切済

質問者：oshiete_goo_gle
質問日時：2014/10/09 02:51
回答数：3件

下記のソースのボーダー代替で使用している部分
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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2014/10/17 18:25

やはりよくわからないのですが・・

結論から言うと、
10.5 内容の高さ: 'height'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
『このプロパティはボックスの内容幅を指定する。』
headerのサイズはfixedやabsoluteでウィンドウの高さを参照しますが、そうでない要素はウィンドウの幅を参照します。
　そのため、親(articleやbody)以降のpaddingにしろ、それに引き続くsectionにしろ、サイズを指定しようとすると幅になってしまいます。
　全体をboderで囲むのは先に示したサンプルで可能ですが、読み込み時に続く要素をぴったりとheaderにつなげるのは不可能です。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2014/10/10 13:47

＞やりたい事はhtmlとbodyと.articleと.headerにheight:100%を掛けている状態で.headerから.footerまでをボーダーで囲むだけでいいです。

　なら、fixedさせているheaderを除いてborderをつけてしまえばよい。

- 0
- 件

通報する

この回答へのお礼

返答ありがとうございます。

＞＞やりたい事はhtmlとbodyと.articleと.headerにheight:100%を掛けている状態で.headerから.footerまでをボーダーで囲むだけでいいです。
＞なら、fixedさせているheaderを除いてborderをつけてしまえばよい。

これは.headerを消すということでしょうか？
それとも.header以外にborderを加えるということでしょうか？
.headerを消したら条件と違ってきます。
あと、今回の質問、返答のソースにはfixed掛けていないので
fixedは関係ないと思うんですが？

通報する

お礼日時：2014/10/10 15:50

No.1

回答者： ORUKA1951
回答日時：2014/10/09 19:11

＞ボーダー(border: solid 5px #000;)で表示させること出来ないでしょうか？

何をされたいかがさっぱり分からないです。
自分が読む立場になって、しっかりと推敲して質問しましょう。

　すくなくとも、どの部分を囲むのか、スクロール時固定されるのかなど

height:100%を使用した入れ子の表示 - Webデザイン・CSS - 教えて！goo( http://oshiete.goo.ne.jp/qa/8782901.html )
　のNo.1の回答で図を提示しました。そのようなイメージを・・・
　また、No.2とNo.3でサンプルコードも記しました。

　それらをよく読んで、試してみて、どうすれば意図が伝わるか工夫してください。

※なお、HTMLはちゃんと文書構造で示したほうが伝わりやすいです。
　ヘッダは固定で、本文(section)とフッタは連続して、ヘッダの周囲のみ枠を付けたいとか
　いちいちHTMLソース見なくても分かりますよ。
　　私はスタイルシーと書くときHTMLは見なくても書いていけます。
　例えば、
　　div.section{position:relative;}
　　div.section div.aside{
　　　position:absolute;width:200px;top:0;reight:0;height:100%;
　　}
　　div.section div.aside h3{font^size:・・・・

※.container:first-child {のような書きかたは、CSS1の時代のとっても古い書き方です。
　CSS2以降は、基点となるセレクタを書くことになりました。
　.container:first-childは、後方互換のために*.container:first-child の*(全称セレクタ)を省略したものと見なしてはくれますが、他人は無論、自身も分かり難くなります。きちんと書いたほうが良いです。
　あなたの場合、そもそもDIV自体不要なのじゃないかと

<body>
　<div class="article">
　　<div class="header">
　　　<p>Header</p>
　　</div>
　　<div class="section">
　　　<div class="section>
　　　　<p>Section-1st</p>
　　　</div>
　　　<div class="section">
　　　　<p>Section-2nd</p>
　　　</div>
　　　<div class="section">
　　　　<p>Section-2nd</p>
　　　</div>
　　</div>
　　<div class="footer">
　　　<p>Footer</p>
　　</div>
　<div>
</body>

HTML5では、DIVは書かれた様な形では使えなくなりますから、
<body>
　<article>
　　<header>
　　　<p>Header</p>
　　</header>
　　<section>
　　　<section>
　　　　<p>Section-1st</p>
　　　</section>
　　　<section>
　　　　<p>Section-2nd</p>
　　　</section>
　　　<section>
　　　　<p>Section-2nd</p>
　　　</section>
　　</section>
　　<footer>
　　　<p>Footer</p>
　　</footer>
　</article>
</body>
となります。
※意味のない<br>は書かないほうが良いです。HTMLの文書構造を示すとき邪魔です。高さがあることを示したいなら
　<div class="section" style="min-height:300px">
と書いておけば済む。
　煩雑にすると五月蝿がられてみてもらえませんよ。

　HTMLは文書構造を示すためのものに徹底すると、ずっと楽で、他人に説明するのも楽になります。先の回答でHTML5を使用した理由でもあります。

- 0
- 件

通報する

この回答へのお礼

はい、説明不足で申し訳ございません。
やりたい事はhtmlとbodyと.articleと.headerにheight:100%を掛けている状態で.headerから.footerまでをボーダーで囲むだけでいいです。

*HTMLソース

<body>
__<div class="article">
____<div class="header">
______<p>Header</p>
____</div>
____<div class="section">
______<p>Section-1st</p>
____</div>
____<div class="section">
______<p>Section-2nd</p>
____</div>
____<div class="section">
______<p>Section-3rd</p>
____</div>
____<div class="footer">
______<p>Footer</p>
____</div>
__</div>
</body>

*CSSソース

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body,
.article {
width: 100%;
height: 100%;
}

.section {
width: 100%;
height: auto;
background: #fff;
}

.header{
width: 100%;
height: 100%;
background: #3498db;
}