3

2 つの水平列 (左の列は固定) と、2 番目の (コンテンツ) 列の下にある下部フッター (同様に固定) のレイアウトがあります。

2 番目の (コンテンツ) 列に境界線を適用すると、フッターを通過してページの下部に移動しますが、フッターの上に約 50px の下の境界線が必要です。

これが必要なのは、背景画像をコンテンツに適用するためです。これは、フッターを通過する (または触れることさえ) べきではなく、左側の列も同様です (これは今のところ問題ではありません)。

誰かが私の問題を解決するのを手伝ってください。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            html
            {
                height:100%; 
                max-height:100%;  
                padding:0; 
                margin:0; 
                border:0; 
                background:#fff -18px 0 no-repeat; 
                overflow: hidden; 
            }

            body
            {
                height:100%;
                max-height:100%;
                overflow:hidden;
                padding:0;
                margin:0;
                border:0;
            }

            #content
            {
                display:block;
                height:100%;
                max-height:100%;
                overflow:auto;
                padding-left:240px;
                position:relative;
                z-index:3;
            }

            #head
            {
                position:fixed;
                margin:0;
                top:0;
                right:18px;
                display:block;
                width:100%;
                height:100px;
                background:#ddd;
                z-index:5;
                color:#fff;
            }

            #foot
            {
                position:fixed;
                margin:0px;
                bottom:-1px;
                right:18px;
                display:block;
                width:80%;
                height:50px;
                background:rgb(214,100,50);
                color:#fff;
                text-align:right;
                z-index:4;
            }

            #left
            {
                position:fixed;
                left:0;
                top:0;
                height:100%;
                width:200px;
                background:#aaa;
                background-position:0 100px;
                color:#fff;
            }

            * html #head, * html #foot,* html #left
            {
                position:absolute;
            }

            #pad1
            {
                display:block;
                width:18px;
                height:100px;
                float:left;
            }
            #pad3
            {
                display:block;
                width:18px;
                height:50px;
                float:left;
            }
            .pad2
            {
                display:block;
            }
        </style>
    </head>

    <body>

        <div id="foot">
            <div id="pad3"></div>
            <br />
            {footer}
        </div>

        <div id="left">
            <div class="pad2"></div>
            {menu}
        </div>

        <div id="content">
            <div style="border:2px solid blue;">
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />

            </div>
        </div>
    </body>
</html>

誰かが私を助けてくれたら、とてもありがたいです。

ここに私の問題の画像リンク (ビジュアル) があります: http://postimage.org/image/h46ilcfgr/

4

2 に答える 2

0

フッターの下にもう 1 つの要素を追加しましたが、background-color:#fff を使用して #content の上に 240 ピクセルの左マージンと青いボーダートップを持つ別の要素が含まれています。

スクロールバーのために持っていた #footer の {right:18px} を削除しました (スクロールバーは異なる場合があります。カウント方法については、スクロールバーの幅を計算する方法を参照してください)。

使用されるスクロールバーが本文の 1 つになるように、本文内でコンテンツ フローを作成しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        html
        {
            height:100%; 
            max-height:100%;  
            padding:0; 
            margin:0; 
            border:0; 
            background:#fff -18px 0 no-repeat; 

        }

        body
        {
            height:100%;
            max-height:100%;

            padding:0;
            margin:0;
            border:0;
        }

        #content
        {
            display:block;

            padding-left:240px;
            position:relative;
            z-index:3;
        }

        #head
        {
            position:fixed;
            margin:0;
            top:0;
            right:18px;
            display:block;
            width:100%;
            height:100px;
            background:#ddd;
            z-index:5;
            color:#fff;
        }

        #foot
        {
            position:fixed;
            margin:0px;
            bottom:-1px;
            right:0;
            display:block;
            width:80%;
            height:50px;
            background:rgb(214,100,50);
            color:#fff;
            text-align:right;
            z-index:5;
        }

        #left
        {
            position:fixed;
            left:0;
            top:0;
            height:100%;
            width:200px;
            background:#aaa;
            background-position:0 100px;
            color:#fff;
            z-index:6;
        }

        * html #head, * html #foot,* html #left
        {
            position:absolute;
        }

        #pad1
        {
            display:block;
            width:18px;
            height:100px;
            float:left;
        }
        #pad3
        {
            display:block;
            width:18px;
            height:50px;
            float:left;
        }
        .pad2
        {
            display:block;
        }

        #underfooter{ background-color:#fff; position:fixed; bottom:0; width:100%; height:100px; z-index:4; }
        #underfooter .padding{ margin-left:240px; border-style:solid; border-width:2px 0 0; border-color:blue; }
    </style>
</head>

<body>

    <div id="foot">
        <div id="pad3"></div>
        <br />
        {footer}
    </div>

    <div id="underfooter">
        <div class="padding">
        {under footer}
        </div>
    </div>

    <div id="left">
        <div class="pad2"></div>
        {menu}
    </div>

    <div id="content">
        <div style="border:2px solid blue;">
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />

        </div>
    </div>
</body>

于 2014-08-06T13:04:29.633 に答える