CSSで上下の配置を逆転させるには？

質問

HTMLは変更せず、CSSの修正だけでスマートフォンに
対応することになりました。
HTMLの一番上に書いたメニューを、その下に書かれた
メインコンテンツ（高さは決まっていない）の下に配置させたいのですが、
よい方法がみつからずに困っております。

<div id="header">
メニュー
</div>
<div id="main">
メインコンテンツ
</div>

何かよい方法はありませんでしょうか。
よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

私の知る限りですが、良い方法はないでしょう。
せいぜい、小さくしてfixで脇にどけておいて、mainはその分marginをとる。
もしくは、header自体をdisplay:noneとする。

　ちなみに、私は最初から携帯電話やPDAも考慮してheaderにはナビゲーションは置いてないのです。header部分は画像のない「見出し要素」と「簡潔な要約div」のみでロゴなどは見出しの背景としてscreen用のスタイルシートで設定している。パンくずリストはともかく、ナビゲーションは末尾においています。
<div class="header">
</div>
<div class="section">
　<div class="nav"></div><!-- section内ナビゲーション -->
　<div class="article"></div>
　<div class="aside"></div>
</div>
<div class="footer">
</div>
<div class="nav"><!-- サイトマップ -->
</div>
とか・・

解決策はなくはないです。古いコンテンツでナビゲーションが最初のほうにある場合
.htaccessで
<FilesMatch "^old$">
SetHandler cgi-script
</FilesMatch>
と書いて、oldというファイルをCGIとして動作させて、
/old/example/abc.html
が要求されたとき、/example/というPATH_INFOから、OLD_HTML内の/example/abc.htmlを取り出してきて、動的に内容を書き換えて出力させています。
・・・HTMLとはいえ、XML的にきちんと整形していますから可能な方法ではありますが・・

お礼

お礼が遅くなり申し訳ございません。
新規に作成する場合はナビゲーションを末尾にする方法、ぜひ取り入れたいと思います！
CGIを使用するという方法、新鮮でした。
試してみたいと思います。
ありがとうございました。

回答No.2

ORUKA1951

すみません。iPhoneでしたね。携帯電話でなく・・
なら、
<link media="only screen and (max-device-width:480px)" href="smart.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<link href="pc.css" type="text/css" rel="stylesheet">
<![endif]-->
ですね。

　HTMLがちゃんとできていたら、位置を変えるのは簡単なので省略しますが、CSS3の機能で、スタイルシートを切り替えます。

お礼

ヘッダー部分をposition:absoluteのbottomで指定すれば
よかったですね。
すみません、こんな簡単なことをやっと思いつきました。
ありがとうございました。

補足

ご回答ありがとうございました。
ご指導いただいたことと同様の方法で、CSSの切り替えは既にできております。
（私の質問の最初の一行、余計でした・・・申し訳ございません）
上下を入れ替える方法がどうしても思いつかなく
メインコンテンツの情報量が変動するため、position:absoluteは使えないしなぁ、と。
よい方法があればご教授お願いいたします。

回答No.1

ORUKA1951

<link rel="stylesheet" media="screen" href="/CSS/standard.css">
<link rel="stylesheet" media="tty,handheld" href="/CSS.handheld.css">
じゃまずいの？？
媒体型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/media.html#q2 )