コンテンツ部分の高さに合わせた縦線を引きたいのですが、どうも上手く実現する
方法が思い浮かびません。
コンテンツは表示するページによって高さが異なります。
CSSを利用することは何ら問題ありませんが、JavaScriptでwindow.load()イベントなどで
記述するのはちょっと避けたいです。
あくまでレイアウトということで・・・。
今縦線はこんな感じで作られてます。
#splitter {width:0px; height:485px;
border:solid 2px #e5ecf9;overflow:hidden;
border-top:none; border-bottom:none;
background:#e5ecf9; float:left;
margin-right:10px}
<div id="splitter"></div>
divだと無理なんでしょうか・・・?
ご教示下さい。
No.2ベストアンサー
- 回答日時:
残念ながら、レイアウト自体が、想像できません。
**
普通、伸縮させたいdivの中に伸縮するコンテンツが入っていないと伸縮はしないと思います。
<div id="a">
<div id="b"></div>
</div>
bに伸縮する縦線を記述すると、bの中身が縦に伸びたときにはbも伸びて同時にaも伸びる。
<div id="a">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
bとcがfloatのばあい、dがclear:bothならaも中身に従って伸びます。
cssで静的に表現できる線ってこの程度のものだと思います。
なお、floatさせたものにmarginを指定するとIE6では倍の幅になりますのでpaddingに置き換えておいた方がいいです。
中が伸びると外も自動で伸びるというのは分かるのですが、
やっぱり独立したものをいい感じのやり方で自動で伸びる
ようになってなってくれないようですね。
ちょっと、諦めて別な方法で対応します。
IE6は、、、もうIE8も出てるので、無視します^^
3世代も昔のブラウザまでいちいち対応するのは面倒なので。
No.1
- 回答日時:
javascriptを使わずCSSで多分一番てっとりばやいのは、
高さの変わるというコンテンツ部分の要素の背景に
背景画像として引きたい線の画像をrepeat-y指定することだと思います。
上記ソースでは2px四方の画像になりますね。
この回答への補足
実は縦線にJavaScriptが組み込まれていて、縦線をクリックすると
左にあるメニュー部分を非表示にするという動作を行います。
やっぱり縦線の大きさもJavaScriptでページ読み込み時に変えて
あげないとダメですかね・・・。
それかページ単位にコンテンツの高さが確定したらその高さと
同じほどで設定してあげるとかでしょうか・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】floatで左右に並べた...
-
CSS 可変マージン
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
ポップアップ中に動くカウント...
-
スタイルシートで位置固定する...
-
css固定したフッターが本文と重...
-
文字を固定したいのですが…
-
現在、ホームページの制作をし...
-
テーブルの1つのセル内で、上揃...
-
文字をクリックしたら別の文字...
-
TABLEの高さを固定したいのですが…
-
オンマウス時に別画像を上に重...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
Javascript初心者|jQueryの.va...
-
eclipseでcssを使うためには?
-
[急ぎ] videoタグで埋め込んだm...
-
console.log結果をhtmlで表示し...
-
デフォルト非表示にしたい。【t...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
チェックボックスの背景色って...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
CSSでdivのheightを動的に
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
リキッドデザイン3カラム左端幅...
-
htmlのstyleのposition:relativ...
-
★★★フッター最下部固定/スクロ...
おすすめ情報