- 締切済み
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; }
- oshiete_goo_gle
- お礼率72% (8/11)
- CSS
- 回答数3
- ありがとう数11
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
やはりよくわからないのですが・・ 結論から言うと、 10.5 内容の高さ: 'height'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#the-height-property ) 『このプロパティはボックスの内容幅を指定する。』 headerのサイズはfixedやabsoluteでウィンドウの高さを参照しますが、そうでない要素はウィンドウの幅を参照します。 そのため、親(articleやbody)以降のpaddingにしろ、それに引き続くsectionにしろ、サイズを指定しようとすると幅になってしまいます。 全体をboderで囲むのは先に示したサンプルで可能ですが、読み込み時に続く要素をぴったりとheaderにつなげるのは不可能です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ボーダー(border: solid 5px #000;)で表示させること出来ないでしょうか？ 何をされたいかがさっぱり分からないです。 自分が読む立場になって、しっかりと推敲して質問しましょう。 すくなくとも、どの部分を囲むのか、スクロール時固定されるのかなど height:100%を使用した入れ子の表示 - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8782901.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,section,footer持つと期待される完結した記事 --> <header><!-- この記事のヘッダ --> <p>Header</p> </header> <section><!-- 見出し要素(h1～h6)を一つだけ持つ本文 --> <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を使用した理由でもあります。
お礼
はい、説明不足で申し訳ございません。 やりたい事は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; }
お礼
返答ありがとうございます。 ＞＞やりたい事はhtmlとbodyと.articleと.headerにheight:100%を掛けている状態で.headerから.footerまでをボーダーで囲むだけでいいです。 ＞なら、fixedさせているheaderを除いてborderをつけてしまえばよい。 これは.headerを消すということでしょうか？ それとも.header以外にborderを加えるということでしょうか？ .headerを消したら条件と違ってきます。 あと、今回の質問、返答のソースにはfixed掛けていないので fixedは関係ないと思うんですが？