0

最近、少し難しいウェブページをデザインしようとしています。

3 つの主要な div があります。1 つはヘッダー用、もう 1 つはフッター用、3 番目はメイン コンテンツ用です。ヘッダーとフッターは、ページの上下に固定する必要があります。ブラウザ ウィンドウのサイズを変更しても、その場所を変更してはなりません。3 番目の div は、これらの div の間の空白スペースにある必要があります。ウィンドウのサイズ変更でページに合わせてサイズを変更できます。

そのdivにGoogleマップを配置したいので、メインdivの高さを正確に変更する必要があるため、このdivの高さが重要です。

私は非常に多くのことを試みましたが、成功しませんでした。heightdiv を 100% に設定する (body と html の高さも 100% である) のは答えではありませんでした。テーブル (3 行、高さ固定の 2 行、高さ可変の 1 行height="100%") を使用すると、いくつかの問題もありました (IE8 では、 a を宣言するdoctypeと、2 行目の div ( with height:100%) がセルに収まりませんでした)。もう！）。

今、私はこの仕事をする考えがありません。私に何ができる？

注:古いブラウザーとの互換性は私にとって重要なので、CSS3 を使用しない方が好きです。

4

4 に答える 4

1

あなたはこのようなことを試すことができます。

HTML 

   <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>

CSS 

#header {
    height:50px;
    width: 100%;
    background: black;
    position: fixed;
    z-index: 1;
    top: 0;
}

#body {
    height:100%;
    width: 100%;
    background: #CCC;
    position: absolute;
    z-index: 0;
}

#footer {
    height: 50px;
    width: 100%;
    background: #0CF;
    position: fixed;
    bottom: 0;
}

ここにフィドルがあります-http ://jsfiddle.net/6M59T/

于 2013-02-04T20:39:50.917 に答える
0

ヘッダーに一定の高さを使用し、スティッキー フッターを使用してフッターを一定の高さに保ち、下部にも配置します。その間のスペースは常に適切な高さでなければなりません。

于 2013-02-04T20:32:26.847 に答える
0

必要な 100% の完全な高さを取得するには、親要素を「クリア」する必要があるため、高さの問題を処理するには、よく知られているClearfix ハックを試す必要があります。

于 2013-02-04T20:37:20.023 に答える
0

これは css の欠点の 1 つです。これら 3 つの div だけを使用して目的を達成することはできません。ヘッダーとフッターの高さをオフセットするには、追加の div を使用する必要があります。これを解決する方法は次のとおりです。

<body style="height:100%; margin:0; padding:0;">
    <div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div>
    <div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat">
        <div id="header-offset" style="height:50px;"></div>
        <div id="footer-offset" style="height:70px;"></div>
    </div>
    <div id="footer" style="height:70px; background-color:lightblue;"></div>
</body>
于 2014-02-08T10:59:06.700 に答える