16

だから私はかなり問題のあるレイアウトのウェブサイトを作っています。黒いブロックで示された4つのコーナー画像TL、TR、BL、BRがあります。濃いオレンジ色の領域がメインコンテンツ（幅960px）で、外側の領域はブラウザウィンドウとして緑色の矢印で示されています。図を参照してください。

図http://dotcafedesigns.com/stackoverflow/problem.gif

上の画像は、サイトを可能な限り狭く示しています。定義された領域よりも大きい場合は、これ（960px）よりも狭くすることはできません。スクロールバーはありません。下の2つの画像は、ブラウザの幅が異なることを表しています。

幅が960pxに下がる場合を除いて、左下と右下の黒いブロック（画像）は常に画面の左下と右下にある必要があります。この場合、BLとBRの画像はメイン領域にわずかに突き刺さるはずです。サイトがたとえば200ピクセルに縮小されている場合でも、BR画像が右隅を突っついているはずはありません。

この時点では、IE6で正確に機能するかどうかはあまり気にしませんが（大まかに機能させることができます）、Javascriptまたは非常に実験的なCSSなしで完全に機能する方法を理解することさえできません。現在、私は絶対位置のdivを使用していますが、これは一種の作業ですが、正しく機能しません。

他に方法がなければ、少しJSを受け入れたいと思いますが、受け入れたくありません。

非常に高く評価された答え！

4

3 に答える 3

17

Javascriptは必要ありません。少なくとも最近のほとんどのブラウザでは。単純なポジショニングと1つの@mediaクエリを使用して、私はそれをやってのけました：

<head>
  <style type="text/css" media="screen">
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: orange;
      text-align: center;
      color: black;
      overflow-x: hidden;
    }
    #content {
      width: 960px;
      margin: 0 auto;
      padding: 20px 0;
      min-height: 800px;
      background: #cc6600;
      z-index: 0;
    }
    .image {
      background: black;
      color: white;
      height: 60px;
      width: 100px;
      padding: 20px 0;
      z-index: 1;
      opacity: .95;
    }
    #top {
      width: 960px;
      margin: 0 auto;
      position: relative;
      overflow: visible;
    }
    #top .image {
      position: absolute;
    }
    #top .left {
      left: -80px;
    }
    #top .right {
      right: -80px;
    }
    #bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100px;
    }
    #bottom .image {
      position: absolute;
    }
    #bottom .left {
      left: 0;
    }
    #bottom .right {
      right: 0;
    }

    @media all and (max-width:1120px) {

      #container {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: visible;
      }
      #bottom .left {
        left: -80px;
      }
      #bottom .right {
        right: -80px;
      }    

    }
  </style>
</head>
<body>
  <div id="top">
    <div class="left image">left image</div>
    <div class="right image">right image</div>    
  </div>
  <div id="content">
    content
  </div>
  <div id="bottom">
    <div id="container">
      <div class="left image">left image</div>
      <div class="right image">right image</div>
    </div>
  </div>
</body>

それは「非常に実験的なCSS」の説明に該当するかもしれませんが、それがどれほどのサポートを持っているか、そしてJSのタッチでそれをブートストラップするのがいかに簡単であるかに驚かれると思います-単にブラウザの幅を確認してください-幅が1120pxを下回る場合は、CSSのサイズを変更して追加します。

于 2010-03-09T08:01:15.503 に答える
2

このようなもの？必要に応じて、JavaScriptコードを同様のJQueryコードに置き換えることができます。これがどのように機能するかを示したいだけです。

<html>
<head>
  <title>....</title>

  <style type="text/css">
  html
  { height: 100%; margin: 0; background: white; }
  body
  { height: 100%; width: 960px; margin: 0 auto; background: gray; overflow: hidden; }
  #main
  { margin: 0px; padding: 5px 20px; position: relative; }

  #headLeft
  { position: absolute; top: 0px; left: -80px;
    width: 100px; height: 35px; background: green; }
  #headRight
  { position: absolute; top: 0px; right: -80px;
    width: 100px; height: 35px; background: green; }
  #footLeft
  { position: absolute; bottom: 0px; left: 0px;
    width: 100px; height: 35px; background: green; }
  #footRight
  { position: absolute; bottom: 0px; right: 0px;
    width: 100px; height: 35px; background: green; }
  </style>

  <script type="text/javascript">
  function checkSize ( event )
  {
    var contentWidth = 960;
    var minOuterBoxSize = 60; // maximum 100-60=40 px will be displayed inside the main area

    if ( window.innerWidth - contentWidth < minOuterBoxSize * 2 )
    {
      var pos = ( ( minOuterBoxSize * 2 ) - window.innerWidth + contentWidth ) / 2;
      document.getElementById( 'footLeft' ).style.left = '-' + pos;
      document.getElementById( 'footRight' ).style.right = '-' + pos;
    }
    else
    {
      document.getElementById( 'footLeft' ).style.left = '0px';
      document.getElementById( 'footRight' ).style.right = '0px';
    }
  }
  </script>
</head>

<body onload="checkSize( event );" onresize="checkSize( event );">
 <div id="main">
  <div id="headLeft">TL</div>
  <div id="headRight">TR</div>

  <p>Normal content</p>
 </div>

 <div id="footLeft">BL</div>
 <div id="footRight">BR</div>
</body>
</html>
于 2010-03-07T21:41:51.173 に答える
1

本当にトリッキーな部分は底だけです。残りの部分は非常に簡単です。

<body>
    <div id="container">
        <div id="header">
            <div class="right"></div>
            <div class="left"></div>
        </div>

        <div id="footer">
            <div class="right"></div>
            <div class="left"></div>
        </div>
    </div>
</body>

CSS：

#container {
    margin: 0 auto;
    width: 960px;
}

#header {
    position: relative;
}

#header .right, #header .left {
    position: absolute;
    width: 100px;
}

#header .right {
    left: 940px; /* leaves 20px inside the #header */
    background: url(images/header_right.gif) no-repeat;
}

#header .left {
    left: -80px; /* leaves 20px inside the #header */
    background: url(images/header_left.gif) no-repeat;
}

と同様のものがいくつかありますが、ウィンドウ幅を検出してsをわずかに#footer調整するには、JavaScriptを少し使用する必要があります。left

于 2010-03-07T20:48:30.673 に答える