相對定位與響應式設計

我試圖定位一個接一個接一個div，當div相對定位時很容易實現，但我希望每個div都適合瀏覽器的大小。
我用這個方法非常粗略地實現它：相對定位與響應式設計

<div id="container"> 
<div id="test-1" style="background: url(../images/background-v2.jpg)"></div> 
<div id="test-2" style="background: url(../images/background-v2.jpg)"></div> 
</div>

CSS：

#test-1 { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#test-2 { 
    position: absolute; 
    top: 101%; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

所以＃測試-1尺度上，當你縮小適應瀏覽器的大小，然後測試 - ＃ 2也適合瀏覽器的大小等等。但我已經通過絕對定位並從頂端設置＃test-2 101％來實現這些目標，我不想每次添加另一個div時都這樣做，因此我希望它們相對定位，同時仍保留縮放到瀏覽器背景圖片。如果這是可能的話？可能需要jQuery？
我完全沉迷於這一個！

還有一些我無法弄清楚這些背景圖片，因爲它們嵌套在div中，當瀏覽器的寬度低於750px，背景圖片變得固定，無論如何他們可以總是停留在瀏覽器的中心，基本上使瀏覽器左側的圖像溢出來了？

來源

2013-01-22 user1374796

我沒有使用背景圖片，因爲我真的不知道你與他們做什麼，但這裏是使用jQuery的大小問題的解決方案：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
     <style> 
      .fill-browser{ 
       width:100%; 
      } 
     </style> 
     <!-- uncomment the line below to include jquery, I had to comment it out for stackoverflow --> 
     <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script--> 
     <script> 
      $(function() { 
       Resize(); 
      }); 

      //Every resize of window 
      $(window).resize(function() { 
       Resize(); 
      }); 

      //Dynamically assign height 
      function Resize() { 
       // Handler for .ready() called. 
       var windowHeight = $(window).height() + 'px'; 
       $('.fill-browser').css('height', windowHeight); 
      } 
     </script> 
    </head> 

    <body> 
     <div class="fill-browser" style="background-color:#aa0000;"></div> 
     <div class="fill-browser" style="background-color:#00aa00;"></div> 
     <div class="fill-browser" style="background-color:#0000aa;"></div> 
    </body> 
</html>

來源

2013-01-23 00:31:22 Dean

謝謝，這是完美的！還有一個小問題，你知道是否可以在每個div的頂部滾動錨點？所以div-1將會全屏，然後當你向下滾動瀏覽器時，會將div-2錨定在頂端等等。 – user1374796

這些應該讓你開始：http://stackoverflow.com/a/11033304/1253708 http://stackoverflow.com/a/1811047/1253708 - 請參閱這一個的一些提示的意見。這個API非常精美，我認爲它可以用來實現您的滾動目標：http://cubiq.org/iscroll-4 – Dean

您可能還需要檢查out - http://srobbin.com/jquery-plugins/backstretch/ 這是一個jQuery插件，可以輕鬆地展開背景圖片。

來源

2013-01-23 02:16:49 awolfe76

相對定位與響應式設計

回答

相關問題