- ベストアンサー
CSSでpxと割合の共存
以下のような画面を作成しています。 画面を上下2つのボックスに分けて、上側を100pxにして、 下側を残りの領域にしたいのです。 具体的には以下のようなCSSです。 #head { position : absolute; left : 0; top : 0; margin : 0; padding : 0; height : 100px; width : 100%; overflow : hidden; background-color : #eeeeee; } #tail { position : absolute; left : 0; top : 100px; width : 100%; overflow : auto; } これだけでは、tail領域に入るモノによって、 左右スクロールの表示位置がおかしくなります。 上の領域も%で指定して、tailにheightを指定すれば、 うまくいくのは判っているのですが、上の領域をpxで 指定する必要があるためそれはできません。 また、Windowの大きさも変更されることを前提に しています。 なにか、良い方法は無いでしょうか？ よろしくお願いします。
- Automaton
- お礼率77% (14/18)
- CSS
- 回答数7
- ありがとう数5
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
CSSの仕様では以下のようにすると希望通りになると思います。 body{ height:100%; margin:0;padding:0; overflow:hidden; } #head{ position:absolute; top:0;left:0; width:100%;height:100px; background-color:#eee; } #tail{ position:absolute; top:100px;bottom:0; width:100%; overflow:auto; } ただし、Firefox、OperaではOK、IEではNG。 (MacのsafariやIEでの結果は不明) CSSとしてできることでもIEのシェアを考慮すると従来どおりのテーブルレイアウトにするか、諦めて別のデザインにするとかフレーム分割するとかの妥協が必要なようです。
その他の回答 (6)
- quads
- ベストアンサー率35% (90/257)
#3 #5 です。 考えたのですが、標準準拠モードのIEへの対応方法を見つけることができませんでした…。 position,margin,padding,border,divの入れ子,overflowを組み合わせてもheight:100%が常に固定されてしまい、#4さんの通りになってしまいます。 #3は改良でも何でもありませんでしたね；失礼しました。 互換モードなら簡単に実現できます。 PureCSSでの構成は横も難しいですが、縦も難しいですね…。
お礼
すみません。 私は互換モードでもうまくいきませんでした。 しかし、いろいろな調査ありがとうございました。 助かりました。 なお、私が採用した解法は#2に書きました。
- ao_
- ベストアンサー率33% (15/45)
#1です。 補足ありがとうございました。 私は質問の内容を勘違いしていました。大変失礼しました。 で、私もやってみたんですが、結果は#2さんと同じ結果です。 私はMacユーザーなのんですが、MacIE以外は希望通りだと思います。WinIEがだめなら、DOCTYPE宣言を<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">にしてみてはどうでしょうか？手元にWinIEがないのでわかりませんが参考URLで似たような事が乗っています。
お礼
標準・互換モードでもダメでした。 どうやらIEは基準となるtopとbottomを両方指定する ことが根本的に出来ないようです。 なお、私が採用した解法は#2に書きました。 回答ありがとうございました。
- quads
- ベストアンサー率35% (90/257)
>> #4 滅茶苦茶でしたね…。 #headのoverflowとかも。 ちょっと考えてみます…。
- steel_gray
- ベストアンサー率66% (1052/1578)
#3> quadsさん IEの場合、tailのスクロールバーの下の方が画面の外にはみ出してますね。 スクロールバー自体に触れずにスクロールの操作をする手段は色々あるかもしれないけどちょっと微妙な感じ。
- quads
- ベストアンサー率35% (90/257)
#2 steel_gray さんの回答を参考に示されたCSSを改良させていただきました。 html, body{ height:100%; margin:0;padding:0; overflow:hidden; } #head{ position:absolute; top:0;left:0; width:100%; height:100px; background-color:#eee; } #tail{ position:absolute; top:100px;bottom:0; width:100%; overflow:auto; background-color:#fdd; } * html #tail{ height:100%; } Macでは未確認ですが、大抵のブラウザで理想通りになるかと思います。 もし不完全であれば、CSSハックを組み合わせで補完すれば対応できると思います。 一応、挙動確認のため#tailの方も背景色を指定しました。 装飾や余白等の指定についてはご自身で確認してください。 今回のポイントは、 ●ルート要素(html要素)及び親要素(body要素)にheight:100%指定 ●指定したいブロック要素にもheight:100%指定(結果的にIEのみ) ●構成的にポジショニングで上下ブロックの分立 ●overflowの指定 といった程度でしょうか。 不具合があればご報告ください。
- ao_
- ベストアンサー率33% (15/45)
補足お願いします。 提示頂いたCSSを見ると、サイトは左寄せで幅はウィンドウサイズによって可変するものだと思いますが、positionを使用されている理由はを教えてください。 また、 ＞右スクロールの表示位置がおかしくなります。 というのは横スクロールバーがウィンドウの途中に出てしまうってことでしょうか？
補足
position : absolute; にしているのは、下の領域を任意の場所に置き、 下領域だけの水平垂直スクロールを表示したいからです。 (上は幅以外は固定し、スクロールを出したくない) positionを使わずに上記のようなことを行う ことはできるのでしょうか。 (CSSは独学なので基本を知らない可能性はあります)
関連するQ&A
- CSS検証サービス
ヘッダーと本体の部分のCSSをこの前教えてもらった CSS検証サービスにかけたらエラーが返ってきました。 div { position : relative ; color : white ; } #header {position : fixed ; top : 0px ; left : 0px ; overflow : auto ; width : 100% ; height : 8% ; z-index : 2 ; border-bottom : 1px red solid } #navi{ position : absolute ; left : 50 px ; top : 10 % ; height : 88% ; overflow-x : hidden ; overflow-y : auto ; z-index : 1 ; } #headerではエラーで出ず、#naviのtopとleftで構文的におかしいと出ます。 やっぱりおかしいですか？ちなみにブラウザ上は想定した通りに行っています。
- ベストアンサー
- CSS
- ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF } <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FF95E4; position: absolute; top: 50px; left: 100px; ; } #example1 { /* position: absolute; */ width: 750px; height: 300px; top: 50 px; left: 150 px; background-color: #FFAAEA } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } #footer { width: 748px; height: 100px; background-color: #ffffff; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- 疑似フレームがIEだと成り立たない
疑似フレームがIEだと成り立たない 以下のようなCSSですが、FIREFOXやクローム等では反応するのですが、 IEだと処理されません。 どうすればいいのでしょうか？ 教えてください。お願いします。 ちなみにCSSというものは初心者です。申し訳ありません。 <STYLE> <!-- BODY .menu1 { width : 12%; height : 100%; left : 0px; top : 100px; position : fixed; overflow: auto; } .menu2 { width : 12%; height : 100%; right : 0px; top : 100px; position : fixed; overflow: auto; } .main { position : absolute; z-index : 1; } --> </STYLE>
- 締切済み
- ブログ
- CSSでのブロックのセンタリングについ
いつもお世話になっております！ BackgroundにFlashを指定して、その上に別のブロックがくるように指定しています。 FlashのCSSの指定が、#flashと#flash object。その上に#flash.sectionが表示されるようにしているのですが、 Flashの大きさとFlash.sectionのWidthが違うせいか、Flash.sectionが画面の中央に表示されません。 FlashのWidthが1800pxでその真ん中（900px地点）からFlash.sectionが表示されてしまいます。 これをうまく、画面の中央に表示されるよう、指定することはできないでしょうか？ ご存知の方、何卒ご教授願います！！！ CSS指定は下記の通りです。 div#sub{ text-align:center; overflow:auto; } #flash { width:1800px; height:340px; margin:0 auto; position:relative; text-align:center; } #flash object { position:absolute; top:0; left:0; z-index:0; } #flash .section { position:relative; z-index:5; width:1000px; text-align:center; margin:0 auto; }
- ベストアンサー
- CSS
- CSSのスタイルシートについて教えて下さい。
現在、ASP.NETにてメイン画面に使用する４分割のアプリケーションを作りたいと考えているのですがWeb Developer 2005 ではframesetが使えないので代替案を模索していました。 そこでCSSのスタイルシートにて作成しているのですが、見ようみまねでサンプルを加工しても記述を見ても経験が浅い為全く分からなくて困っています。 勉強が足りず恐縮ですがご教示下さい。 ４分割フォームの詳細は ・ヘッダー部分「Title.aspx」→ 両端に画像が入った題名のみのファイル ・左部分「left.aspx」→ 検索ボックスと検索ボタンが４つあり。キーを入力して 次の検索結果フォームへ異動する。 ・右部分「right.aspx」→ left.aspxと全く同じ作りです。 （東日本と西日本が分かれているようなイメージです。） ・下部 → 署名（フォームではなく文字列） <BODY> <HEAD> <link rel="stylesheet" type="text/css" href="pseudoframe_lmr.css"> </HEAD> <DIV class="menu"> メニュー </DIV> <DIV class="bar"> タイトル </DIV> <DIV class="main"> メインコンテンツ </DIV> <DIV class="bar2"> <p align="right">Copyrigth © 2006-2007 Name all rights Reserved</p> </DIV> </BODY> <STYLE> /* Opera/mozilla/共通用CSS */ <!-- BODY{ background-color : #e0fef8; } .menu{ width : 50%; top : 15%; left : 50px; top : 15%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar{ width : 100%; height : 15%; left : 0px; top : 0px; position : fixed; overflow: auto; z-index : 2; } .main{ width : 50%; top : 15%; left : 20%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar2{ width : 100%; height : 15%; left : 0px; top : 85%; position : fixed; overflow: auto; z-index : 2; } --> </STYLE> <!--[if gte IE 5 ]> /* IE5以上に適用させるCSS */ <STYLE> BODY{ width : 100%; margin : 0px; overflow : hidden; padding : 0px; } .menu{ position : absolute ! important; } .bar{ position : absolute ! important; } .main{ height : 70%; overflow: auto; } .bar2{ position : absolute ! important; } </STYLE> <![endif]--> コードを載せましたのでどの様に記述すればよいのかご教示下さいませ。 皆様、宜しくお願い致します。
- 締切済み
- HTML
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートでうまくフッター部分を配置設定する方法を教えてください。
スタイルシートに詳しい方に教えていただきたいのですが、 今ホームページを作っていて、 フッター部分の設定に困っています。 タイトルカラム 左カラム コンテンツカラム フッターカラム というページ構成で 絶対指定で top と left を使って 各要素の位置指定をしているのですが、 フッター部分だけうまくいきません。 フッターに 「Copyright (C) ●● All Rights Reserved.」 という文言をタイトルカラムと同じ width で入れたいのです。 なぜか title カラムの下に表示されたり、 画面の一番上に表示されたりするのです。 bottom を使用するのかな？ と思ったのですが、それでもうまくいきませんでした。 できるだけページ全体を table タグを使って デザインしたくなくて、スタイルシートであれこれ やっているのですが、苦戦しています（汗）。 スタイルシートを下記しますので、 お知恵をお貸しくださいませ。 -------------------- div.title { position: absolute; top: 0px; left: 20px; width: 800px; background-color: #ffffff; height: 412px; } .left { width:185px; position: absolute; top: 415px; left: 20px; background-color:#ffffff; } .content { position: absolute; top: 415px; left: 205px; width: 600px; text-align: left; } .footer { position: absolute; bottom: 0px; left: 20px; width: 800px; text-align: left; height: 100px; }
- ベストアンサー
- HTML
- CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- ベストアンサー
- HTML
- positionプロパティの設定について
下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------
- ベストアンサー
- HTML
お礼
上記の例が一番参考になりました。 私の解決方法を書いておきます。 上ブロックを100pxにして、下ブロックをbottom 基準で0px、heightを%で指定しました。 ウィンドウの高さによって、多少間が空いたり しますが、よほど大きく小さくしない限り破綻 しないので、納得できる妥協でした。 ありがとうございました。