- ベストアンサー
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の大きさも変更されることを前提に しています。 なにか、良い方法は無いでしょうか？ よろしくお願いします。
- みんなの回答 （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は独学なので基本を知らない可能性はあります)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
上記の例が一番参考になりました。 私の解決方法を書いておきます。 上ブロックを100pxにして、下ブロックをbottom 基準で0px、heightを%で指定しました。 ウィンドウの高さによって、多少間が空いたり しますが、よほど大きく小さくしない限り破綻 しないので、納得できる妥協でした。 ありがとうございました。