2

機能しているレイアウトがありますが、非常に厄介な問題が 1 つあります。コンテンツが画面よりも高い場合、背景が停止します。

これは、bad-ASCII-art 形式での目的のレイアウトです。

_____________________  _
|    | long    |logo|   |
|    | content |    |   |
|    |         |    |   |
|    |         |    |   |
|grad|         |grad|   | Viewport
|    |         |    |   |
|    |         |    |   |
|    |         |    |  _|
|    |         |    |
|    |         |    |
_____________________

|2em| <-20em->| 2em|

..または短い内容で..

_____________________  _
|    | short   |logo|   |
|    | content |    |   |
|    |         |    |   |
|    |         |    |   |
|grad|         |grad|   | Viewport
|    |         |    |   |
|    |         |    |   |
|    |         |    |   |
|    |         |    |   |
_____________________  _|

基本的には、単一の柱のように見え、その両側に柱としての輝きがあります。左グローの上にはロゴがあります。コンテンツが短い場合でも、フルハイトのままです。

中央の列を修正するCSS min-height hackを使用してみましたが、グラデーションはコンテンツまでしか伸びません (左の列では単一&nbsp;の 、右の列ではロゴ)。

レイアウトは次のようになります。

レイアウト

そして問題（ブラウザウィンドウが縦に縮小されたとき）：

問題

最後に、問題の HTML/CSS、http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/

4

6 に答える 6

5

左右に別々の列にグラデーションがある場合、「偽の列」を実装する必要があります。

弾力性のあるバージョンを求めている場合は、Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box をご覧ください。

于 2008-11-14T07:51:29.483 に答える
2

これが私が最終的に使用したもので、この高い値のテクニックpadding-bottomを使用して、等しいが逆の値を入力します。次に、その巨大なマージンを囲む div をmargin-bottom設定します。overflow:hidden

それはかなりハックですが、うまくいきます！これで、フルハイト、単一の em 定義幅、フルハイトの背景画像が両側に配置されました! 余分なマークアップはあまりありません (コンテナ div、3 つの列のそれぞれの div)

<html>
<head>
    <title>Yay</title>
    <style type="text/css" media="screen">
        body, html{
            height:100%;
            margin:0;
            background:#1d4b76;
        }
        #contain{
            width:40em;
            margin-left:auto;
            margin-right:auto;
            overflow:hidden;
        }
        #left{
            background-image:url("static/grad_left.png");
            background-repeat:repeat-y;
            background-position:right;

            height:100%;
            float:left;
            width:150px;

            padding-bottom:10000px;
            margin-bottom:-10000px;
        }
        #middle{
            float:left;
            background:#000;
            color:#fff;
            width:20em;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
        #right{
            float:left;
            background-image:url("static/grad_right.png");
            background-repeat:repeat-y;
            background-position:left;
            width:150px;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="left">
            &nbsp;              
        </div>
        <div id="middle">
                    Put lots of text here
        </div>
        <div id="right">
            <img src="static/logo.png" width="150" height="150" alt="Logo">
        </div>
    </div>
</body>
</html>
于 2008-11-17T14:45:23.827 に答える
1

この変更を試してください：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Test page</title>
 <style type="text/css" media="screen">
   html, body{
     margin: 0 auto 0 auto;
     padding:0;
     width:22em;
   }

   #wrapper{
      background-color:#ccc;
   }

   #left{
      float:left;
      width:22em;
      background-color:#00f;
    }

    #middle{
       float:right;
       width:18em;
       margin-right:2em;
       background-color:#f00;
     }

     #right{
        float: right;
        width:20em;
        background-color:#0f0;
        background-image: url(static/logo.png);
        background-position: top right;
        background-repeat: no-repeat;
      }

   </style>
   </head>
   <body>
     <div id="wrapper">
       <div id="left">
          <div id="right">
             <div id="middle">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>
             </div>
           </div>
         </div>
       </div>
   </body>
</html>
于 2008-11-14T08:34:03.420 に答える
1

YUI のグリッドに関するビデオを見たところ、非常に有望に見えました (見ることをお勧めします!)。私はまだそれをテストする時間がありませんでしたが、おそらく将来的にそうするでしょう. それはあなたが望むものかもしれません。

于 2008-11-14T07:12:51.370 に答える
0

後にこれを追加します<div id="right">...</div>：

<div style="clear: both; font-size: 1px; line-height:1px">&nbsp;</div>
于 2008-11-14T08:19:03.967 に答える
0

これで最終的にそこにたどり着きましたが、マークアップと画像にいくつかの変更を加える必要がありました.

  1. #left および #right div を削除します。
  2. 幅 592 ピクセルの透明な背景で、その左右にグラデーションがある新しい単一の背景画像を作成します。
  3. ロゴを #wrapper の #middle の直前に追加します

したがって、マークアップは次のようになります。

<body>
    <div id="wrapper">
        <img src="static/fifestock_logo.png" />
        <div id="middle">
        ... etc ...
        </div>
    </div>
</body>

次に、スタイルシートの関連する変更は次のとおりです。

#wrapper{
    height:100%;
    width:805px;
    margin-left:auto;
    margin-right:auto;
    text-align: right;
}

#middle {
    width:504px;
    padding: 0 44px;
    margin: -154px auto 0 auto;
    background:#000 url(new_bg.png) repeat-y top left;
}

私にはうまく見えます。

FF3 と Opera (Windows / Mac atm にアクセスせずに Linux を実行) でのみテストされていますが、IE / Opera では大きな問題はないと思います。

于 2008-11-14T11:30:37.590 に答える