如何在流體佈局中使用固定位置

Question

我有一個流體佈局的WP博客，主要內容是一個居中的div，大約1000px寬。

現在我想在每邊放置一個廣告橫幅區域，並且我希望使用固定位置，以便在用戶向下滾動博客時留下這些廣告。

我已經看到了類似廣告的博客，但他們沒有流體佈局，而是可以使用position：fixed和width：Ypx left：-Ypx這使得他們的廣告始終固定在左側。

雖然流體佈局看起來這是不可能的嗎？

這是我試圖模仿，看看雙方都不向下滾動的效果......

http://radarmagazine.se錯誤的站點

---更新---------

我把錯誤的示例站點..這是一個固定的位置：

這是示例站點： http://freshnet.com

Answer 1

這是可能的，而不JS。這是我的方法。

基本上，你要設置你的包含分區，然後克隆它，並致力於position: fixed;這種方式，固定div中克隆的容器將共享相同的樣式，您的實際包含股利和按比例調整div內設置。

<div class="ads"> <!-- Dedicated position: fixed; --> 
    <div class="wrap"> <!-- Cloned container for positioning of Ads --> 
     <img src="http://placehold.it/100x750&text=Ad1" /> 
     <img src="http://placehold.it/100x750&text=Ad2" /> 
    </div> 
</div> 

<div class="wrap"> <!-- Main container with a z-index of 1 --> 
    <img class="main" src="http://placehold.it/960x300" /> 
</div> 

一旦這項工作到位，你可以相應的固定格內放置你的「廣告」，而他們的反應/固定容器的突出位置，使他們堅持吧 - 給，他們正在堅持的幻覺你的實際包裝。在達到max-width後，固定廣告將被推出視口。

http://jsfiddle.net/m0v3vqcp/ - 小提琴

Full Screen/ With Their Ads

Answer 2

可以使用一些JavaScript，獲取window.resize事件上的內容寬度，然後根據該值在x軸上更新廣告位置。我做了一個JSFiddle來說明如何實現這一點。

http://jsfiddle.net/r86r6j1f/

Answer 3

您可以使用在body填充，以使房間的橫幅，一個簡單的例子：

http://jsfiddle.net/dpcd3c1b/

Answer 4

我不相信你需要使用Javascript吧。你應該可以用一對相對定位的浮標來完成，並且位置固定。

http://jsfiddle.net/9ov32nkd/1/

body, html { 
    margin: 0; 
    padding: 0; 
} 

#wrapper { 
    min-width: 960px; 
    position: relative; 
    margin: 0 auto; 
} 

#inner { 
    position: absolute; 
    width: 960px; 
    left: 50%; 
    margin-left: -480px; 
} 

.content { 
    width: 720px; 
    padding: 20px; 
    background-color: #CCC; 
    margin: 0 auto; 
    float: left; 
} 

.banner { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

.banner1 { 
    float: left; 
} 

.banner1 .inner, 
.banner2 .inner { 
    background-color: #EFEFEF; 
    height: 300px; 
    width: 100px; 
    position: fixed; 
    top: 0; 
} 

.banner2 { 
    float: right; 
}