- 締切済み
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; }
関連するQ&A
- height:100%を使用した入れ子の表示
最初のセクションのみ横幅、高さとも一杯に表示、背景画像有り（background-attachment:fixed）で固定、他は中央配置（max-width:960px)、高さは非固定、全体をボーダーで囲むような感じのデザイン(参照画像 / 緑 : ボーダー / 青 : 背景画像 / 赤 : 各セクション)を作ろうとしているのですが思うようにいきません。 背景を変え、ボーダーなどを付けて確認したのですがheight:100%の入れ子（最初のセクション)を作った際(body > #border > #background > .section)の.sectionでbody内の要素は全てと判定されてるみたいで(.section:last-childを付けて確認)途切れてしまいます。 参照画像のようにするためにはどうすればいいでしょうか？ 以下ソースです *HTML部分 <body> <div id="border"> <div id="background"> <div class="section"> <p>Section-1st</p> </div> </div> <div class="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> </div> <div class="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> </div> <div class="section"> <p>Section-4th<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> </div> <div class="section"> <p>Section-Last<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> </div> </div> </body> *CSS部分 * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; } body { border: dotted 5px #95a5a6; } #border { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; border: solid 5px #34495e; } #background { width: 100%; height: 100%; background: #3498db;/*本来なら画像が入ります*/ display: table;/*文字が見やすいように、削除可*/ } #background > .section { height: 100%; display: table;/*文字が見やすいように、削除可*/ background: none; } .section p { display: table-cell;/*文字が見やすいように、削除可*/ text-align: center;/*文字が見やすいように、削除可*/ vertical-align: middle;/*文字が見やすいように、削除可*/ } .section { max-width: 960px; width: 100%; margin: 0 auto; background: #fff; border: solid 5px #2ecc71; } body .section:last-child { border: solid 5px #e74c3c; }
- 締切済み
- CSS
- Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？ こちらがコードです。 HTML CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
- borderをページの下まで伸ばしたい
お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。 テーブルを使い左右にレイアウトを分けています。 左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。 メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか？ 恐れ入りますが下記ソースです。 /*CSS*/ body { margin: 0px auto; padding: 0px; height:100%; width: 760px; text-align:center; position:relative; } #header { padding:0px ; margin: 0px auto; width: 760px; height: auto; } #contents { margin: 0px auto; padding: 0px; height:100%; width: 760px; background-color:#FFFFFF } .side{/*メニュー部分*/ margin:0px; padding:0px 0px 20px; border:1px #666666 solid ; width:163px; height:auto; } .footer {/*フッターの背景画像サイズに合わせheightを設定*/ margin:0px; padding:10px; width: 760px; height:72px; text-align:left; background-image:url(image/bottom.gif); background-repeat:no-repeat; border:0px; } .coretable{/*画面レイアウト左右分けテーブル*/ margin:5px 0px 0px; padding:0px; width:760px; } <!--html--> <body> <div id="header"> ヘッダー内容 </div> <div id="contents"> <table border="0" cellpadding="0" cellspacing="0" class="coretable"> <tr><td width="165" align="center" valign="top"> <div class="side"> メニュー内容 </div> </td> <td width="595" align="center" valign="top"> メインコンテンツ内容 </td> </tr> </table> </div> <div id="footer"> フッター内容 </div> </body> </html> あるサイトで拝見して、 .sideに height:100%;/* for IE6 */ min-height:100%; を加え、 html{ height:100%; } body{ height:100%;} としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。 テーブルを使っているのが悪いのでしょうか？ どうかお知恵をお貸し下さい。
- ベストアンサー
- CSS
- borderの範囲
cssコーディングに関しての質問です。 現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { width:500px; padding: 15px 0 0 15px; border-left:1px solid #ccc; border-top: 1px solid #ccc; } #style1 p { margin:0; padding:0; } .style2 { float:right; clear:both; margin:0 0 20px 30px; } .style2 img{ margin:0; padding:0; } ==html============ <body> <div id="style1"> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> イメージをfloat:right;に指定し、 縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、 画像の延長上は無くなって表示されてしまいます。 右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？ よろしくお願いします！
- ベストアンサー
- HTML
- floatを突き抜けて背景の色が無くなる
Firefox等ではタイトルの高さ分だけコンテナを突き抜けてしまうようです。 どうすればよいのでしょうか？ タイトルがあるのと、表は画面いっぱいにしたい(高さ100%)という意図があり中々うまくいきません。 是非アドバイス宜しくお願い致します。 <html> <head> <style type="text/css"> html, body{ height: 100%; } #container { height: 100%; color: #000000; background-color: #cccccc; border: 1px solid #333333; } #container:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } #title { width: 100%; height: 70px; float: left; border: 1px solid #000000; } .leftBox { width: 20%; float: left; border: 1px solid #000000; } .rightBox { width: 75%; height: 100%; float: right; border: 1px solid #000000; } </style> </head> <body> <div id="container"> <div id="title">タイトル</div> <div class="leftBox"> ナビ<br> a<br> b<br> c<br> d<br> e<br> f<br> g<br> h<br> i<br> j<br> k<br> l<br> m<br> n<br> o<br> p<br> q<br> r<br> s<br> t<br> u<br> v<br> w<br> x<br> y<br> z<br> </div> <div class="rightBox"> <table height="100%" width="100%" border="1"> <tr> <td>表1</td> <td>表2</td> </tr> <tr> <td>表3</td> <td>表4</td> </tr> </table> </div> </div> </body> </html>
- 締切済み
- CSS
- CSS 左右違う大きさのボックスでheightを合わせたい
外部CSSでHPを作成しています。 基本的なことかと思いますが、調べてもどうしてもうまくいかないので 皆さまのお力をお貸しください。 左右にボックス（で良いのでしょうか？）を置き、その中にテキストを入れています。 それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。 固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。 どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか？ また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか？ どうぞご教授ください。 よろしくお願い致します。 /*CSSファイルの記述*/ .waku1{ border : solid 1px #999999; border-bottom: none; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku2{ border : solid 1px #999999; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .waku3{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku4{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .clear{ clear : left; } /*HTMLファイルの記述*/ <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku3"></div> <div class="waku4"></div> <div class="clear"></div>
- ベストアンサー
- HTML
- min-heightとheightの違いについて
HTML、CSSを勉強中です。 こちらで似た質問は拝見したのですが、疑問が解決できなかったので投稿させて頂きます。 ページの内容が少ないときにもフッターを最下部に表示させるため、 いくつかのサイトを参考にさせて頂いて以下のようなコードを書きました。 ・HTML(一部) <html> <body> <div id="container"> <div id="article">内容</div> <div id="footer">フッター</div> </div> </body> </html> ・CSS（一部） html,body { height: 100%; } div#container { position: relative; min-height: 100%; } body > #container { height: auto; } div#article { padding-bottom: 20px; } div#footer { position: absolute; bottom: 0px; height: 20px; width: 100%; } これで目的は達成したのですが、ほぼ丸写しの作業で、containerにheightではなくmin-heightを指定する意味がよく分かりません。 min-heightは高さの最小値を設定するプロパティとのことで、これ自体が上手くいくことは分かるのですが、何故heightに替えると上手くいかないのかが分かりません（実際に、フッターがページ内容の終わり位置まで浮き上がってきます)。 親のbody、親の親のhtmlの高さが100%に指定されているのだから、containerの高さ(height)もこれらに対して100%とすることで画面いっぱいの高さが常に確保されるのかと思ったのですが、違うのでしょうか。 そもそもhtmlの高さは何に対して100%なのかと調べてみると「表示領域に対して」とのことで、実はこの記載があったページではmin-heightではなくheightを利用してボックスの高さを100%に出来るとまとめてあったのですが、上述の通り私は今回の目的には上手く利用できませんでした。 「高さ100%のhtml、bodyに対してcontainerのheightが100%」というのが上手くいかないのなら、 何故heightをmin-heightに替えるだけでOKなのかますます分からなくなってしまいました。 だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。
- 締切済み
- CSS
- HTMLでCSSでボーダーが表示されません。
HTMLでCSSでボーダーが表示されません。 右サイドバー（right）の左にボーダーを表示させたいのですが、 画像のように文字を記述したところまでしかボーダーが表示されません。 ボーダーをfooterの上まで引きたいのですが、 わかる方いらっしゃいましたら回答宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"> <div id="right_title"></div> <div id="right_content"></div> </div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #right { float: left; height: auto; } #right_title { } #right_content { border-left-width: 1px; border-left-style: solid; border-left-color: #000; }
- ベストアンサー
- HTML
お礼
返答ありがとうございます。 ＞＞やりたい事はhtmlとbodyと.articleと.headerにheight:100%を掛けている状態で.headerから.footerまでをボーダーで囲むだけでいいです。 ＞なら、fixedさせているheaderを除いてborderをつけてしまえばよい。 これは.headerを消すということでしょうか？ それとも.header以外にborderを加えるということでしょうか？ .headerを消したら条件と違ってきます。 あと、今回の質問、返答のソースにはfixed掛けていないので fixedは関係ないと思うんですが？