No.3ベストアンサー
- 回答日時:
こんにちは
『ブラウザ用』しか見ていないのでcss内は適当です(--;)
cssのみではheight:*px;指定しないとおそらく無理?だと思います
<style type="text/css"><!--
#newBox {
width:600px;
margin:70px auto 0px;
border:1px solid darkgray;
}
#newBox_Left {
background-image:url(left.jpg);
background-repeat:repeat-y;
width:20px;
float:left;
}
#newBox_center {
background-color:Lavender;
width:560px;
float:left;
}
#newBox_Right {
background-image:url(right.jpg);
background-repeat:repeat-y;
width:20px;
float:left;
}
--></style>
<script language="javascript"><!--
window.onload=function() {
h = document.getElementById("newBox_center");
boxh = h.clientHeight;
document.getElementById("newBox_Left").style.height = boxh + "px";
document.getElementById("newBox_Right").style.height = boxh + "px";
}
//--></script>
<noscript>
<style type="text/css"><!--
#newBox_Left,#newBox_center,#newBox_Right {
height:500px;
}
--></style>
</noscript>
<div id="newBox">
<div id="newBox_Left"></div>
<div id="newBox_center">
text<br> text<br> text<br> text<br> text<br> text<br>
text<br> text<br> text<br> text<br> text<br> text<br>
text<br> text<br> text<br> text<br> text<br> text<br>
text<br> text<br> text<br> text<br> text<br> text<br>
</div>
<div id="newBox_Right"></div>
<div style="clear:both;"></div>
</div>
javascriptを使用してますので当然offにしている環境では1行分の背景しか表示されません
そのため<noscript>内でheight指定しています
p.s.
一応これで僕の環境(IE6,Firefox2,Opera9)で実現できているのですがたまに表示が異なることがありますので分かる範囲内であれば修正しますので言ってください
ご回答、本当にありがとうございます。
お教え頂いた方法で試してみたところ、
無事に思っていた表示ができました。
本当にありがとうございました。
私は、javascriptは分からないのですが、
これから勉強して理解して行きたいと思います。
今回は本当にありがとうございました。
No.2
- 回答日時:
全体的にどんなデザインしたいか不明なのでなんとも言えないですが、
newBoxに height:100% を加えればうまく表示できるみたいですね。
IE限定ですが・・・(^^;
FWでは文章が突き抜け表示されてしまうようです。
あとは各ブロックの調整でしょうかね・・・
再度ご回答、本当に感謝致します。
私のやり方が間違っているのか、
お教え頂いた方法でもうまくいきません・・・。本当にすみません。
どんなデザインをしたいかを書いていなくてすみませんでした。
具体的な例をアップしましたので、もし宜しければご覧下さい。
ブラウザ用 http://css.ehoh.net/aaa/
ローカル用 http://css.ehoh.net/aaa/download.html
「IE6」と「IE7」と「Firefox」では、
それぞれ、違うように描画されると思いますが、
センターの要素が、左右と合ってないのは共通だと思います。
ブラウザのフォントの大きさ設定を変えて頂ければ分かると思いますが、
「文章がはみ出る」場合は、センターの要素が飛び出して、
「文章がはみ出ない」場合は、左右の要素が長すぎる感じになっていると思います。
このセンターの要素にどれだけの長文が入ろうと、
左右の画像が、ぴったりと下まで着いてきてほしいのです。
左右の画像を1枚にすれば実現できるのですが、
2枚の画像で実現したいのです。
HTMLのテーブルを使えば可能なのですが、
CSSだけでも出来るものなのか知りたいのです。
ご回答、本当にありがとうございました。
No.1
- 回答日時:
===CSS====
#contener{
width:800px;
background:black;
}
#newBox{
width:100%;
background:red;
}
#blockA{
width:60%;
height:100%;
background:blue;
float:right;
}
#blockB{
width:40%;
height:100%;
background:green;
float:left;
}
=====html===========
<div id="contener">
<div id="newBox">
<div id="blockA">ここに内容</div>
<div id="blockB">ここに内容</div>
</div>
</div>
こんな感じかな??
久々にCSSいじったんで確証はないですが、
さらにボックスを追加してやって、その中に高さを合わせたい子要素を入れると・・
その上で2つのBOXのheightを100%とすれば、2つある要素のうち高い方のBOXの高さに合わせられますよ。
たぶん・・・
ご回答、ありがとうございます。
ご回答を参考にしてテストしてみましたが、
やはり、状況は変わりませんでした・・・。
子要素の100%は、
親要素に対する100%という解釈になる為だと思います。
仮に、「親要素」の高さが「1000px」で、
「子要素-A」の高さが、長文を入れた為に「1200px」になった場合、
ブラウザ上では親要素も引き伸ばされ「1200px」となり表示されます。
長文を入れた「子要素-A」と隣り合う、「子要素-B」の高さは、
「ブラウザ上で表示される実際の親要素の高さ」→「1200px」ではなく、
「CSSで指定されている親要素の高さ」→「1000px」に高さを合わせてしまいます。
その為、「子要素-B」の下には「200px」の空きができてしまいます。
現在のCSSのバージョンでは、
隣合う要素に高さを合わせる事が不可能なのなら諦めたいと思いますが、
何か方法があるのなら知りたいのです。
ご回答、本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- 数学 画像に関して質問がございます。 0<|z+1|<2の時、z=-1の時とz=1の時において、 「z=- 1 2023/08/07 12:41
- 哲学 選ぶ男イコール勲章論 2 2022/08/27 14:53
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- 数学 画素数の計算 中高レベルの計算で申し訳ないのですが、下記の問題が分かりません 比率が4:3のA4の横 3 2022/12/17 22:41
- JavaScript jsで、switch文で書かれた分をif文にできませんか。 1 2022/07/28 15:10
- 子供 男性に必要で女性に不要なモノ(才能・能力・身体的機能など)は何だと思いますか? 3 2022/06/21 17:07
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
- JavaScript 階層別の組織図の自動作成について 1 2022/10/26 13:42
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ポップアップのソースの書き方...
-
フッター上部に謎の隙間
-
メニューやヘッダー背景だけを...
-
R、G、Bのスライドバーで色を変...
-
textareaで入力した文字を改行...
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
jQueryスライドショー画像への...
-
画像の表示位置
-
JavaScript スライドの画像にリ...
-
デフォルト非表示にしたい。【t...
-
onclickとonmouseoverを同時に...
-
複数トリガーで動作するアコー...
-
window.openで値の渡し方を教え...
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
ホームページビルダー15 メニュ...
-
画像をランダムな座標に一定の...
-
createElementが一瞬で消えてし...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
1行で左寄せと右寄せと中央揃え...
-
Ctrl+F(検索)の窓を出したいの...
-
チェックボックスの背景色って...
-
Webサイト作成 プログレスバー ...
-
離れた場所にマウスオーバーで...
-
スタイルシートで画面を上下に...
-
メニューバーもスクロールに合...
-
ホームページのsidebar とconte...
-
CSSで背景を下までのばすには?
-
TABLEの高さを固定したいのですが…
-
かなり困っています。知恵を貸...
おすすめ情報