web-dev-qa-db-ja.com

CSS-divを作成すると使用可能なスペースがすべて消費される

すべて、

ブラウザで利用可能な画面スペースのみを占めると思われるページがあります。

「トップバー」と「ボトムバー」があり、どちらもページの上部と下部に固定されています。上記の2つのバーの間のスペースの残りを消費（占有）するdivが必要です。

enter image description here

真ん中のdivが上部バーと下部バーに重ならないことが重要です。これはCSSでまったく可能ですか、それともjsを使用する必要がありますか？.

また、jsを使用する場合、ブラウザーがjsコードの前にCSSを最初にロードすることを考慮して、上記のjsを中央の配置に使用するとどのように機能しますか？

どうもありがとう、

csshtmlcss-position
15
Kayote

relativeおよびabsoluteの位置を使用できます。ここに例を示します：

css

   html,body,#wrapper {
        height:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        position:relative;
    }

    #top, #middle, #bottom {
        position:absolute;
    }

    #top {
        height:50px;
        width:100%;
        background:grey;
    }
    #middle {
        top:50px;
        bottom:50px;
        width:100%;
        background:black;
    }
    #bottom {
        bottom:0;
        height:50px;
        width:100%;
        background:grey;
    }

html

<div id="wrapper">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

デモ：http://jsfiddle.net/jz4rb/4

20
Sotiris

このデモはChrome12で機能しますが [〜＃〜] ymmv [〜＃〜] =サポートする必要のあるブラウザによって異なります。例えば ​​position:fixedはIE6では正しく機能しません。

2
andyb

bodyタグで絶対配置を使用します。 position:absolute上部と下部がゼロの場合、ブラウザウィンドウと同じサイズになるようにボディが「ストレッチ」されます。または、height: 100%も機能しますが、特定の古いブラウザでは奇妙に機能することを覚えています。

次に、中央のdivで絶対位置を使用し、ヘッダーとフッターバーを回避するために十分な上部/下部のオフセットを使用します。ヘッダーバーはtopで絶対的に配置され、フォッターはbottomで絶対的に配置されます。

注：これはモバイルブラウザでは機能しません。 JSを使用してウィンドウの高さを取得し、中央のdivの高さを手動で設定する必要があります。

0
Stephen Chung