- ベストアンサー
CSSで擬似的にフレームを作る方法とは？
- CSSのoverflow:scrollを利用したフレームのように一部分をスクロールできるページを作る方法
- 上側をメニューにする方法についての考え方
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
これでどうですか？ .menu { position: absolute; top: 0px; height: 100px; width: 100%; } .content { position: absolute; top: 100px; bottom: 0px; width: 100%; }
その他の回答 (2)
- metametamu
- ベストアンサー率51% (153/295)
.menuを高さを指定した上でfloatではなく、position:absolute;で上に設置します。 そうすると.contentの高さが100%のまま.menuが上に被るようなレイアウトになると思います。 *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{width:100%;height:100px;position:absolute;top:0;left:0;overflow:scroll;} .content{height:100%;overflow:scroll;} ここで.menuに被る部分に余白を取れば良いのですが、.contentにmarginやpaddingを指定した場合、heightが100%なためウィンドウサイズを超えてスクロールが発生してしまいます。 そこで、.content内の一番最初に来る要素に余白を与えます。 <body> <div class="menu"></div> <div class="content"> <h2>見出し</h2> </div> </body> 例えばHTMLがこんな感じであれば *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{width:100%;height:100px;position:absolute;top:0;left:0;overflow:scroll;} .content{height:100%;overflow:scroll;} .content h2{margin-top:100px;}
お礼
成程、バーの表示などは少しイメージと違ったのですが、 これはこれで一つの方法ですね。 有難う御座います。
- torayoshi
- ベストアンサー率62% (910/1449)
パーセンテージで割り直してみたら？ *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:12%;float:left;width:100%;overflow:scroll;} .content{height:88%;width:100%;float:left;overflow:scroll;}
お礼
回答有難う御座います。 ただ、今回の事例はパーセントでは不都合なのです。 その事を前提として書いておくべきでした。
お礼
topとbottomを同時に指定可能とは知りませんでした。 調べてみると、仕様書でもまさに同じやり方が例示されているのですね…。 有難う御座います。 http://www.y-adagio.com/public/standards/tr_css2/visuren.html#absolutely-positioned