人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

cssとdivを使って段組表示を行っています。
※たて3、よこ3の合計9ボックスです

また、各ボックスでは背景に画像を利用しており、
「background-image」で指定し、
隙間無く表示しています。

この状態のときに、
真ん中の列の中央部の高さが変わった場合に
同時に真ん中の列の左右のボックスの背景画像を
同じ高さで表示したいのですがうまくいきません。
※一応、「background-repeat」で「repeat」を
指定してみたり、
「height」で「100%」を指定してみたりしましたが
だめでした。

どうにしかしてうまく2つのボックスを同時に
中央のボックスと同じように
背景画像の高さを伸ばす方法はないでしょうか。

※中央のボックスにはメッセージが表示されるので
文字数に応じて高さが変更されます。

よろしくお願いします。

●質問者: preshu
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:background-image background-repeat CSS ボックス メッセージ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● hallo21
●25ポイント

画像

http://end

◎質問者からの返答

画像ですか・・・

おそらく、9分割するのでなく、

上・中・下の3段階として、

中段の背景を画像化して行う方法だと思いますが、

今回は9分割されているものとして考えています。

ご助言ありがとうございます。


2 ● Mook
●25ポイント

height で 100% を指定してあげればよいと思いますが、それが有効となるためには親要素が高さを持っていなければなりません。


下記の例では親要素としてテーブルを利用してみました。

<html>
<head>
<style type="text/css">
<!--
.leftBox {
 width: 33%;
 height:100%;
 background-image: url(image.jpg);
 background-repeat:repeat;
 float: left;
 border: 2px solid #000000;
}

.centerBox {
 width: 34%;
 background-image: url(image.jpg);
 background-repeat:repeat;
 float: left;
 border: 2px solid #000000;
}

.rightBox {
 width: 33%;
 height:100%;
 background-image: url(image.jpg);
 background-repeat:repeat;
 float: right;
 border: 2px solid #000000;
}

td.box {
 width: 100%;
 height: 1;
}

--->
</style>
</head>
<body>
 <table width="90%">
 <tr><td class="box">
 <div class="leftBox">左上</div>
 <div class="centerBox">中上</div>
 <div class="rightBox">右上</div>
 </td></tr>
 <tr><td class="box">
 <div class="leftBox">左中</div>
 <div class="centerBox">真ん中1<br>真ん中2<br>真ん中3</div>
 <div class="rightBox">右中</div>
 </td></tr>
 <tr><td class="box">
 <div class="leftBox">左下</div>
 <div class="centerBox">中下</div>
 <div class="rightBox">右下</div>
 </td></tr>
 </table>
</body>
</html>

http://park16.wakwak.com/~html-css/css/css_18.html

◎質問者からの返答

ご回答ありがとうございます。

確かにこの方法であれば

中央のボックスのサイズに高さが連動しますね。

ただ、今回はTableレスなデザインで構築しているので、CSSのみで対応を模索しています。

ご回答ありがとうございました。


3 ● Mook
●50ポイント ベストアンサー

別に親要素は何でも良いので、親要素に DIV を使用してはどうでしょうか。

<html>
<head>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}

.leftBox {
 width: 33%;
 height:100%;
 background-image: url(image.jpg);
 background-repeat:repeat;
 float: left;
 border: 2px solid #000000;
}

.centerBox {
 width: 34%;
 background-image: url(image.jpg);
 background-repeat:repeat;
 float: left;
 border: 2px solid #000000;
}

.rightBox {
 width: 33%;
 height:100%;
 background-image: url(image.jpg);
 background-repeat:repeat;
 float: right;
 border: 2px solid #000000;
}

.box {
 width: 90%;
 height: 1;
 border: 1px solid #FFFFFF;
}

--->
</style>
</head>
<body>
 <div class="box">
 <div class="leftBox">左上</div>
 <div class="centerBox">中上</div>
 <div class="rightBox">右上</div>
 </div>
 <div class="box">
 <div class="leftBox">左中</div>
 <div class="centerBox">真ん中1<br>真ん中2<br>真ん中3</div>
 <div class="rightBox">右中</div>
 </div>
 <div class="box">
 <div class="leftBox">左下</div>
 <div class="centerBox">中下</div>
 <div class="rightBox">右下</div>
 </div>
</body>
</html>

ただ、box クラスの border を指定しないとうまく配列されなかったので、今回は背景色と同じ色を指定することで逃げました。

ここは、もっと良い方法がありそうな気もします。

http://park16.wakwak.com/~html-css/css/css_18.html

◎質問者からの返答

Mookさん

詳細な説明ありがとうございます。

ご説明いただいた内容を試行錯誤して

何とか理解し、自分なりに組み替えて活用できそうです。

いろいろな手段があると思うので、

自分なりにいろいろとご助言いただいた内容を参考にして、

がんばってみたいと思います。

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ