CSSでの破線の表示方法

質問

下記のような破線をボトムまで引きたいです。
http://designbeans.com/

div#sub{
width: 200px;
margin-top: 30px;
margin-left: 10px;
border-right: 0.1em dotted #333333;
float: left;
}
と記述したのですが、ボトムまで引いていません。どうすればボトムまで引けるのでしょうか？
宜しくお願いします。

回答No.3

abril · ベストアンサー

ANo.2です。補足を拝見しました。

> 以下を修正しましたが、だめでした。
（省略）

…これだけの情報では、何がどうだめなのか原因を特定できません。回答のしようがないです。
ここから先は推測に推測を重ねた話しかできません。

> mainsubの中にsubを子入れにしています。

"mainsub"の子要素は"sub"以外何かあるのですか？まさか…単に"mainsub"（メインサブ）という不可解なネーミング、単に元からあったsub”のみ”をこれで囲んだだけですか？もしそうであれば、何の意味もないですよ。

参考にしているサイトなどのパターンは、複数のコラム組になっている事を前提としています。例えば左がナビゲーション、右がメインのコンテンツ、といった2コラム構成などです。質問者様の場合もsub（サブ）とネーミングしたコンテナが左にフロートして幅が200px、という事はおそらく右には幅400px以上ぐらいのメインのブロックがある、このパターンではないですか？

以下はそうだと仮定した場合の話です。右のメインのコンテナが"main"というネーミングだとします。参考サイトの手法に則ってsubとmainの区切りとして破線を両者のコンテナブロックの長い方の高さ一杯に引きたいのであれば、subとmainの「両方」を内包する親のコンテナが必要であり、その親のコンテナに対して破線の画像を縦方向にのみリピートさせる事で実現できるのです。先の回答で「子要素を内包する親要素の方に、背景画像（content-wtt.gif）で描画している」と申し上げたのは、そういう意味です。
なので、上記の方法を取りたいのであれば、HTML側が例えば以下の様に構成されていることが必須です：

<div id="wrapper">
<div id="sub">サブ（左）</div>
<div id="main">メイン（右）</div>
</div>
※floatの指定によってはsubとmainのマークアップの順番が逆の場合もあり。

そしてCSSの方は：
※hoge.gifは、左から200pxの位置に破線が引かれた画像とします。

div#wrapper {
background: url('img/hoge.gif') repeat-y;
}

…という様に。subとmainの高さの指定は不要です。

お礼

> "mainsub"の子要素は"sub"以外何かあるのですか？まさか…単に"mainsub"（メインサブ）という不可解なネーミング、単に元からあったsub”のみ”をこれで囲んだだけですか？もしそうであれば、何の意味もないですよ。
↑
まさにそれでした。意味ないのでしたか…
background: url('img/hoge.gif') repeat-y;だと反映しませんでした。
（FireFox）
background-image: url('img/content-wtt.gif');
background-repeat: repeat-y;
にしましたら出来ました。
どうもありがとうございました。

回答No.2

abril

> http://designbeans.com/は中身が途切れても破線は最後まで引いております。

このサイトでは破線は（それぞれの高さが成り行きの）子要素にボーダーで引いているのではなく、それらの子要素を内包する親要素の方に、背景画像（content-wtt.gif）で描画しているだけです。それぞれのコラムの高さが決められないレイアウトの時によく使われる手法の1つです。

補足

borderではなく、背景画像でしたか。
以下を修正しましたが、だめでした。
mainsubの中にsubを子入れにしています。
div#mainsub{
height: 90%;
background-image: url('img/content-wtt.gif');
}

div#sub{
width: 200px;
margin-top: 30px;
margin-left: 10px;
float: left;
}

アドバイスをお願いします。

回答No.1

yambejp

>どうすればボトムまで引ける

高さを指定するという選択肢はありませんか？
たとえばheight:90%(～100%)

補足

回答をありがとうございます。
height:90%を追加してもだめでした。
#subの中身は行の少ないテキストなのでそれに合わせて破線も短めなんです。
​http://designbeans.com/は中身が途切れても破線は最後まで引いております。