0

1024幅のフレームワークで新しいWebサイトを作成しています。100％幅のトップヘッダー、ヘッダー、メニュー、100％幅のフッターが必要です。しかし、1024ピクセル幅のコンテンツプレースホルダーが必要です。100％の高さのコンテンツを設定しようとしています。たとえば、コンテンツプレースホルダーのコンテンツが少ない場合は、フッターをページの下部に固定する必要があり、コンテンツプレースホルダーのコンテンツが多い場合は、ページ全体をスクロールする必要があります。コードサンプルは次のとおりです。

<div style="width: 100%; height: 30px; background: #dddedf url('Images/top-header-bg.png') repeat-x top left;position: relative;">
<div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Top Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 100px; background: #fff url('Images/header-bg.png') no-repeat center center;
    position: relative;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 30px; background: #0D9B8C url('Images/menu-bg.png') repeat-x top left;
    position: fixed;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
            <div style="width: 100%; height: 30px;">
                    <!--Menu Section-->
            </div>
        </div>
    </div>
</div>

<div style="width: 100%; position: fixed; top: 160px; height: 100%; margin-bottom: -40px;">
    <div style="width: 1024px; margin: 0 auto; background: #fff url('Images/body-bg.png') repeat-x fixed top left;
        height: 100%;">
        <div style="padding: 0 10px;">
<!--Main Content Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 40px; background: #dddedf url('Images/footer-bg.png') repeat-x bottom left;
    position: fixed; bottom: 0;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
               <!--Footer Section-->
        </div>
    </div>
</div>

jqueryのスクロールメニューがあるため、メインコンテンツのプレースホルダーの絶対位置を設定する必要があります。相対位置を設定すると、メニューにアクセスしているときにメインコンテンツプレースホルダー内のテキストが折り返されます。この問題の詳細については、この質問を参照してください。これがデモで、これは同じもののjsfiddle

です。私は何か間違ったことをしましたか？解決策と提案は大歓迎です。 前もって感謝します。

4

1 に答える 1

1

おそらく、Twitterのブートストラップの使用を検討しますか？レスポンシブデザインや、ページの上部と下部に要素を固定するのに最適です。

http://twitter.github.com/bootstrap/

于 2012-10-20T17:05:03.417 に答える