靈活內容的背景圖片？

即時通訊嘗試獲取內容div周圍的一些背景圖像。事情是，內容div應該有一個靈活的寬度（沒問題）。背景圖片應該始終左右連接到內容div。但是：只有在用戶將窗口縮小到內容div的寬度時才應該觸發水平滾動條。靈活內容的背景圖片？

我想出了這樣的事情：當窗口打右絕對DIV

<div> 
    <div class="header">/div> 
<div class="wrapper"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="content">Content</div> 
</div> 
    <div class="footer">/div> 
</div> 



.wrapper{ 
margin:auto; 
width:950px; 
position:relative; 
} 

.left { 
background:transparent url(../images/left.png) no-repeat scroll 0 0; 
position:absolute; 
top:0; 
left:-120px; 
width:120px; 
height:500px; 
} 

.right { 
background:transparent url(../images/right.png) no-repeat scroll 0 0; 
position:absolute; 
top:0; 
right:-120px; 
width:120px; 
height:500px; 
}

滾動條一直出現。我需要它們是兩個div（左/右），因爲內容div應該是靈活的，並且在延伸到很多時不會隱藏背景。

有人爲此得到了一個技術？

來源

2010-01-27 Mike

你想讓滾動條忽略絕對定位的元素的存在，只對內容的div維度作出反應？ – 2010-01-28 13:35:08

那就對了。我已經用ilhan negis的答案解決了它。但也許你有不同的方法......？ – Mike 2010-01-28 22:55:47

你有一個未命名的純根容器div。

爲該div添加此樣式（或給出class/id名稱以連線css減速）。重點是min-width ...保持它與你的容器div的寬度相同。

還增加body,html{margin:0;padding:0;}會更好。

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

這將工作正常免除ie6。對於ie，你可以使用一些js的魔法。

讓我們假設你正在使用jquery庫，並且你已經爲你的根容器div提供了id名稱「shell」。然後只爲ie6試試這個腳本。（創建排除或類似的東西）：

$(document).ready(function(){ 
$('#shell').each(function(){ 
    var that = this; 
    var contentWidth = 950; 
    check(); 
    $(window).resize(check); 
    function check() { 
    var winWidth = Math.ceil($('body').width()); 
    if(winWidth <= contentWidth) { 
    $(that).css({'width':contentWidth}); 
    } else { 
    $(that).css({'width':'100%'}); 
    } 
    } 
}); 
});

此腳本將使「殼」的寬度100％。（如果瀏覽器的寬度大於950px），否則它會鎖定外殼的寬度爲950px，這將啓用滾動條。

來源

2010-01-28 13:03:04 eringen

就是這樣。我剛剛刪除了高度屬性。不知道最小寬度和溢出觸發滾動條。謝謝！ – Mike 2010-01-28 17:12:09

我做了一個網站，類似的東西，我想出瞭解決方案是這樣的：

我創建的圖像與背景中的左側和右側的內容和內容的中間的空間，只是一個純色，儘管圖像是1400 x 539，但它的重量爲12 KB，因此非常好。

<html> 
    <body> 
    <div id="wrapper"></div> 
    </body> 
</html> 


body { 
    background: #fff url(left-and-right.jpg) no-repeat center top; 
    text-align: center; 
} 

#wrapper { 
    margin: auto; 
    text-align: left; 
    width: 960px; 
}

來源

2010-01-28 11:14:00 guzart

謝謝，但那不是我的問題。僅使用一個背景圖像不允許靈活的寬度並且背景總是看起來相同。你有更多的背景你會看到，對吧？那就是我想要解決的兩個背景圖片，總是附在內容的左側和右側。 – Mike 2010-01-28 11:20:14

d'oh！我忘記了靈活的寬度。沒有使用Javascript，我不會看到這種情況。 – guzart 2010-01-28 12:10:47

靈活內容的背景圖片？

回答

相關問題