- ベストアンサー
スタイルシートのレイアウトについて
こんにちは。 スタイルシートを使ってホームページを作成しているのですが、 わからないことがあり、質問させていただきます。 container body header sidebar main footer の構成をしていて、sidebarとmainは、左右にフロートさせています。 sidebarとmainを特になにも指定していのですが、 Ｑ． mainが上下に長い時は、sidebarもその長さに合わせて長くなり、 sidebarが上下に長い時は、mainもその長さに合わせて長くなる、 そんな仕組みを作りたいのですが、heightを自動にしても、 長くなってくれません。 どのように記述をすると良いのでしょうか？ 教えて下さい。お願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
自分も前に同じようなことをしようとしたのですが スタイルシートでのheightできないみたいです 何かサイドとメインの下に書きたいのであれば フッターと形で作ればどうですか？ http://css.uka-p.com/
- 参考URL：
- http://css.uka-p.com/
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <title>さんぷる</title> <style type="text/css"> div#header{ overflow:auto; background-color:red; } div#sidebar { width:30%; float:left; overflow:auto; background-color:green; } div#main { width:70%; float:right; overflow:auto; background-color:blue; } </style> </head> <body> <div id="container"> <p>こんてな</p> </div> <div id="body"> <div id="header"> <div id="sidebar"> <p>さいどばあ</p> </div> <div id="main"> <p>めいん</p> <p>てすと</p> </div> </div> <div id="footer"> <p>ふった</p> <p><a href="http://www.mozilla.gr.jp/standards/webtips0021.html">さんこうしりょう</a></p> <p> Opera 9.10,Firefox,IE 7で上記が成立することを確認したのみで、 実際には<a href="http://www.ne.jp/asahi/minazuki/bakera/html/css/render.html.ja.utf-8#overflow">その他のブラウザにおいてUserAgent任せになってしまうと思います</a>のでそこは理解しておいてください </p> </div> </div> </body> </html>
お礼
すごく御礼が遅くなってしまい申し訳ございません。 ありがとうございました。
- dezimac
- ベストアンサー率56% (2365/4208)
以下の記事を参考にして下さい。 スタイルシート(CSS)で段組を構成する4(前編) 段の背景色が切れないようにする -AllAbout- http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/
お礼
ありがとうございました。 現在実践しています。
お礼
ありがとうございました。 参考にさせていただきます。