• ベストアンサー

スタイルシートでのボックス高さ指定

スタイルシートで左側にボックスを指定して、メニュー表示させているのですが メイン(右側部分)の記事が長くなると、左側ボックスが途中でとぎれてしまいます。 記事の長さに合わせて、ボックスの高さも縦スクロール幅と同じにのばすには、どのようにすれば良いのでしょうか? height: 100%; としてみたのですがダメでした。 タグを調べてみたのですが、今ひとつ判りません。 質問文もわかりにくくてすみませんが、よろしくお願いします。

  • keroq
  • お礼率79% (172/216)
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

一応参考になりそうなURLを乗せておきました。 高さの指定方法とは違いますが参考になれば。 ポイントは空いてしまう空間に背景色が塗られるようにして空間が開いている事を感じさせないようにする。 うまいことブロックを重ねて、長い方のブロックに合わせる、という事だと思います。

参考URL:
http://allabout.co.jp/computer/hpcreate/closeup/CU20050328A/index.htm
keroq
質問者

お礼

私の説明が下手だったにもかかわらず、やりたかった事をわかってもらえて嬉しいです。 高さばかり考えていましたが、まさに目から鱗のやり方で、その手があったか!という感じでした。 もっと柔軟に考えないとダメですね。 大変勉強になりました。有難うございました。

keroq
質問者

補足

すみません。言い忘れました。 おかげでうまく出来ました。

関連するQ&A

  • スタイルシートで画面を縦に2分割する方法

    スタイルシートで左側にメニュー(class=menu)を、右側に本文を書くようなサイトを作っています。 body { margin: 0px; } .menu { background-image:url(./img.gif) ; background-repeat:repeat ; margin:0px ; padding:10px ; position:absolute; width:150px ; } といった感じにしていましたが、左側メニューの背景がテキストの終端部分で切れてしまいます。(メニューの行数が短いので。) 私は、下までメニュー部分の背景がくるようにしたいのです。(つまり、画面が左右に2分割されるように) そこで、いろいろ調べて、body{}と.menu{}に「height:100%;」を加えることによって、少し改善が見られました。 表示させると、画面がきちんと2分割されます。 しかし、右の本文が長い時、スクロールをすると、それに伴いメニューが上に行き、やはりメニュー部分の下部が空白になります。 スクロールしても、下まできちんと2分割できるようにするには、どうすればいいでしょうか? たぶん、分かってしまえば簡単なことなのでしょうが、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • スタイルシートのwidthについて

    <style type="text/css"> #hoge{border:solid 1px black;width:100px;margin:0;} </style> <div id="hoge> </div> このようにdivタグにスタイルシートをつけるとなぜか縦の幅ができてしまいます。 width:100をなくせばただの線になるのですがwidthをつけるとどうして 縦幅ができてしまうのでしょうか? hightをつけてるのはまだしもwidthをつけただけじゃ横の長さが決まるだけで縦は0だと思ったのですが違うのでしょうか? ブラウザはIE6で見ました。

    • ベストアンサー
    • HTML
  • スタイルシートで背景画像を指定

    今までbodyタグで背景を指定していたのですが、スクロールバーや余白の設定で スタイルシートを使うことになったので、背景画像もスタイルシートで指定することにしましたが、何度やっても表示されません。 このように書いてみました。 <style type="text/css"> <!-- BODY { background-image:url(img/28.gif); } BODY { 余白の設定} BODY {スクロールバーの設定 } --> </STYLE> htmlと同じフォルダの中にある、imgフォルダの28.gifという画像です。 画像のパスは間違っていません。アップロードもしてあります。 スタイルシートの解説をしているサイトさんを見ても、 何が間違っているのかわかりませんでした。 なぜ背景が表示されないかわかる方いらっしゃいますか? 余白やスクロールバーはきちんと表示されているのですが・・・

    • ベストアンサー
    • CSS
  • スタイルシートdivについて

    こんばんは。 スタイルシートのDIVについて教えて下さい。 今、幅720pxのテーブルをDIVに変えようと悪戦苦闘している最中です。 DIVについてはほとんど無知なので、あちこちのサイトのスタイルシート講座を覗きながらなんとか作ってみました。 ようは幅720pxのボックスの中に文字を左寄せで配置し、ボックス自体は画面の中央に(左右のマージンを同じに)したいのです。 そのソースなのですが、スタイルシートを div#main{width:720px; margin-left:auto; margin-right:auto; text-align:left; line-height:175%;} と記述し、 HTMLを <div id="main">○○○</div> としました。○○○がテキスト部分です。 でもIE7で確認したところ、ボックスが左寄りになってしまっています。 しかし、どういうわけかFirefoxとOperaではちゃんと中央に配置されているのです。 いったいどこに問題があるのでしょうか。 わかる方、いらっしゃいましたら教えて下さい。

    • ベストアンサー
    • HTML
  • フロントページのスタイルシートの使い方

    フロントページを使っていますが、スタイルシートの使い方がわかりません。 スタイルのリストボックスにはタグの一覧がありますが、タグによってスタイルを決めているのでしょうか?スタイルシートは一つホームページを作成してからスタイルを保存して使うのでしょうか?最初からスタイルシートを使うものではないのでしょうか。それともスタイルを決めてから変更していくのでしょうか。ユーザー定義のスタイルもタグを設定するのでしょうか。新規作成の時の名前はタグ名ですか?

  • スタイルシートのheightについて

    お詳しい方どうか教えてください。 スタイルシートを使用してある文字列を、罫線で囲みたいと思っております。 以下のタグを作成したのですが、height=280が効いていないようなのです。 使用ブラウザは古いのですがNN4.51です。"height"はNN4.51では対応されていないのでしょうか? 作成タグは以下です。 <SPAN STYLE="width: 650px; height: 280px; border: solid 1px black; background: white; color: white;">・・・・<SPAN> どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLに詳しい方!(ボックスの作り方)

    よくホームページで、一個の長方形の中に メニューがあったり、その他いろいろ設置されてる と思うのですが、この長方形というものが ボックスという名前だということはわかりました。 しかし、HTMLのタグでボックスを作ろうと思い、 スタイルシートに入れてみたところ 枠の細さのタグ、ボックスの大きさのタグなど 統合せず、バラバラに表示されます。ボックスを 作るには、あらかじめ色々なタグを統合してから スタイルシートに入れて、やっとボックスという ものができあがるのでしょうか・・>< ボックス作りははじめてで困ってます。アドバイス よろしくお願いします

  • スタイルシートが全く理解できません

    質問させて頂きます。 HPを開こうと思っているのですが、私にとって都合のいいスタイルシートの例文が載っているサイトが見つからないのです。 ヘッダ用の画像を作ったので、 トップページはそのヘッダが画面一番上の中央に来るように(繰り返しなし)、 メニュー(サイドバー?)は左側に羅列されるように、 メイン画面はそのメニューの右側に来るように。 2カラムっていうらしいんですが。 │ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄│ │   ヘッダ画像      │ │____________│ │メ             │  ←この表、崩れて  │ニ             │   表示されてしまいます。 │ュ   メイン画面     │   一番右の縦線は真っ直ぐだと ││             │   仮定してください │              │ │              │ │____________│ こんな感じです。HTMLでもできるのでしょうか?でもHTMLはIE以外のブラウザで見ると崩れると聞いたのでやはりスタイルシートかなと…。 他のページはメニューの右のメインウィンドウに表示されるわけですから、単純なHTMLで充分なHPなので、そのヘッダとindex.htmlをどうにかしたいのです。 あ、1Pだけ別窓で開かせたいページがありまして、そこはヘッダだけでヘッダの下は単純なテーブルが置いてあるだけのページです。 上の図のメニューがなく、ヘッダの下が全てメイン画面なページですね。 普通にHTMLでfixedにすると、画像の上に文字が来てしまうので、とりあえず<br>で間隔を開けてみたんですが、IEとFireFoxでは見え方がぜんぜん違ってしまって、困っています。 本当に基本的な質問なんですが、index.htmlを始めとするHTMLファイルがありますよね。スタイルシートはそれとは別に、text.cssというようなファイルを別に作ってサーバに上げるんですか?それともHEAD部分に埋め込むのでしょうか。 何かいい(コピペしてアレンジすればOK!みたいな)都合のいいサイトをご存知でしたらどうぞ教えて下さい。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • スタイルシートについて。

    現在、ホームページをフレームで区切っています。 しかし、SEO対策や、検索エンジンの関係での不利が 伝えられていますが、すでに、フレームで、制作しています ので、複数のHTMLをそのままで、スタイルシートを作成したい です。現在index.htmをメインとして、左側をsub.htm, 右側をmain1.htmとしております。Sub.htmを固定しています。 左側のsub.htmのリンクで、右側が変わることになります。 変わる右側は、main2.htm,main3.htm,main4.htmとページを 変化させていくとします。文字のサイズや、背景は、各htmlで 表記しますので、フレームだけのCSSを作成したいのです。 そのCSSを教えてください。探しているのですが、サイズや、 レイアウトで、多くが占められていて、複雑で理解できません。 簡単な方法を教えてください。

  • heightを%で指定して効果が出ない!?

    今、左側にメインコンテンツ、右側にメニューのあるページを作成しています。 左側のコンテンツはページによって長さが違うので、右側のメニューもそれにあわせて伸びるようにheight="100%"という風に指定したのですが、ちゃんと効果が出ないようです。 ページトップの宣言文 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> をはずしたら効果が現れたのですが HTML4.01Transitionalだとテーブルのheightの%指定は無効なんでしょうか? もし、そうだとしたら他に解決法はありますでしょうか?

専門家に質問してみよう