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

スタイルシートのfloatについて教えてください。
サイドバーを下まで表示しようとしているのですが、
サイドの端にしか表示されません。どこか間違っているところがあるのでしょうか

****スタイルシート****
width: 740px;
position: static;
margin-bottom: 20px;
background-image: url(http://www.****.co.jp/***/image/backblock.jpg);
background-repeat: repeat-y;
background-position: right;
}
#banner{
width: 740px;
position: relative;
background: #ffffff;
}

#alpha {
width: 525px;
position: relative;
float: left;
background: #ffffff;

}

#beta {
width: 205px;
background: #f1f1d2;
float: right;
padding-left: 10px;
padding-top: 10px;
height: 100%;
}

●質問者: mathilde501
●カテゴリ:ウェブ制作
✍キーワード:.jpg Alpha background background-image background-position
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● fjimo
●35ポイント

#wrap {

width: 740px;

height: 100%;

}

のIDを追加し、

<body>

</body>

のように全体を囲ってみてもだめですか?


2 ● fjimo
●35ポイント

#wrap {

width: 740px;

height: 100%;

}

のIDを追加し、

<body>

<div id="wrap">

</div>

</body>

のように全体を囲ってみてもだめですか?


3 ● quintia
●10ポイント

質問文の

サイドバーを下まで表示しようとしているのですが、

サイドの端にしか表示されません。

の箇所において「下」が曖昧です。また「サイドの端」が意味不明です。


サイドバーとしてボックスを配置しページの一番下までの大きさにしたいのですが、ブラウザの表示領域の高さ分の大きさにしかなりません。

か、

サイドバーとしてボックスを配置しページの一番下までの大きさにしたいのですが、中に記述しているコンテンツ分の大きさにしかなりません。

のどちからだと思いますがどうですか?

あと、スタイルシートの width: 740px; の上にどのように記述しているのかも不明ですね。

コメントしていただきたいところです。


height:100%;

の指定に関しては、

http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

のページが参考になると思います。

とりあえず、なぜ今うまくいかないのか? を知る手がかりになるのではないでしょうか。

関連質問


●質問をもっと探す●



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