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

http://maf.jp/blog/
を見ていただけますでしょうか。
ブログなのですが、エントリーが途中で消えてしまい、その上にページ全体のフッタが表示されてしまっています。
状況としては、クラスmtDiv3のdivタグの中で、記事の入っているmtEntryBodyとComments...とかが入っているmtEntryFooterの2つのdivがあって、
mtEntryFooterをmtEntryBodyの右に表示するためにmtEntryBodyにfloat:left;をかましているのですが、
そうするとmtDiv3の高さが、mtEntryBodyの高さに関わらずmtEntryFooterによって基底されてしまうようなのです。

このような現象を抑えて、mtDiv3がちゃんとmtEntryBodyの高さになるようにするには、どのようにCSSを指定すればよいでしょうか。

●質問者: 元ここギコ!
●カテゴリ:コンピュータ
✍キーワード:CSS エントリー クラス タグ
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● ke-zi
●14ポイント

http://tohoho.wakusei.ne.jp/css/basic.htm

そのファイルは現在ありません

mtEntryBodyに対してheight(高さ)を指定してあげるのが手っ取り早いです。height:500px; とかで試してみては。

詳しいパラメータはとほほさん等を参照してみて下さい。

css自体を覗いてみましたが、結構設定がバラバラな印象を感じましたので、heightに限らず他のパラメータについても調べてみるともっと好みのレイアウトを作れると思いますよ。

◎質問者からの返答

ありがとうございます。

やっぱりheightしかないですかね…。

できれば記事の長さにフレキシブルに対応したいのですが…。


2 ● kacchan6
●14ポイント

http://my.yahoo.co.jp/?a=a

My Yahoo!

float:leftをやめて、

height:100%でいかがでしょうか?

外してたらポイントは要らないです。

◎質問者からの返答

試してみましたが駄目でした…。


3 ● kacchan6
●14ポイント

http://my.yahoo.co.jp/?a=b

My Yahoo!

div.mtDiv3 div.mtEntryBody {

height:100%;

padding-right:5px;

margin-left:3px;

padding-bottom:20px;

width:330px;

}

div.mtEntryFooter {

position:absolute;

top:0;

right:30px;

padding-top:20px;

padding-bottom:20px;

}

これでも外してたらあきらめます。。。


4 ● countdown
●14ポイント

http://www.yahoo.co.jp/

Yahoo! JAPAN

URLはダミーです。

div.mtDiv3に

position:absolute;と

width:500px;(←例えば)

を入れれば、とりあえずの見栄えは良くなるようです。

div.mtDiv3 {

color:#A3A3A3;

background-color:#F0F0F0;

/* for MacIE5’s Bug */

position:relative;

/*¥*/

position:absolute;

/**/

width: 500px;

}

と言う感じです。


5 ● ke-zi
●14ポイント

http://tohoho.wakusei.ne.jp/css/

そのファイルは現在ありません

heightに対してはパーセンテージでの指定は出来なかった気がします。

最終的にどういう形にしたいのかがいまいち分からないのでなんとも言えないですが、topパラメータとmargin-topパラメータを使い分けてみてはどうでしょうか。

一度floatを使うのをやめて、marginやpadding、topやleftだけでレイアウトを制御してみると、floatを使った時にどうなるのかが理解しやすいと思いますよ。


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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