沒有瀏覽器滾動的Div比瀏覽器更寬

我正在處理主內容div將具有970px的佈局。這個div後面，我想與尺寸位置，像這樣一個div 1200x600px（它將包含Flash對象）：沒有瀏覽器滾動的Div比瀏覽器更寬

width:1200px; 
height:600px; 
position:absolute; 
left:50%; 
margin-left:-600px;

當瀏覽器尺寸小於1200像素小的寬度得到它的水平滾動條的問題是。我可以解決這個問題通過：

body {overflow-x:hidden;}

但我不希望它有水平滾動條時，得到尺寸小於970像素寬。

基本上，我試圖讓1200px div行爲更像一個CSS背景圖像。有任何想法嗎？

來源

2010-09-04 tybro0103

這工作沒有JavaScript：

<body style="margin:0"> 
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;"> 
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;"> 
    --flash object-- 
</div> 
</div> 
<div style="position:absolute;width:100%;z-index:100;"> 
--main content-- 
</div> 
</body>

UPDATE：不得不作出改變，以適應您的絕對DIV定位（父div有要絕對定位）

來源

2010-09-04 21:07:39 userx

這會將這些框放在兩個維度的正確位置，但它將內容放在背景之後。 – danorton 2010-09-05 00:49:22

@danorton使用CSS屬性z-index將您的主體設置在頂部。我會更新我的上述代碼。 – userx 2010-09-05 01:47:53

真棒解決方法！不錯的工作！ – spez86 2012-04-09 22:25:31

您可以使用onresize事件，當其小於970px時，將overflow-x更改爲自動或滾動。

如果你正在使用jQuery，仰望.resize()方法

來源

2010-09-04 20:59:16

如果你打算這樣做，確保你使用dobouncing：http://benalman.com/code/projects/jquery-dotimeout/examples/debouncing/（檢查第二個例子） – 2010-09-04 21:05:09

debouncing看起來非常有用，本阿曼寫了一些整潔的插件。我最近使用他的haschange和燒烤插件。 – 2010-09-04 21:10:28

一個解決方案完全可以使用CSS。關鍵件是位置：固定和z-index：-1。這個例子中的兩個DIV是兄弟姐妹，但還有其他的可能性。該解決方案適用於最新版本的Chrome，FireFox，Safari，Opera和MSIE。

這不會MSIE6，不正確執行的z-index的工作作風，但有一個MSIE6兼容的解決方案（這表明在1200像素的滾動條），如果你能重新安排事物，添加一個DIV包裝器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html title="html"> 
    <head> 
    <style type="text/css"> 
    #content 
    { 
     background: #ffffe8; 
     height: 500px; 
     margin: 0 auto; 
     width: 970px; 
    } 
    #background 
    { 
     background: #ffe8e8; 
     height: 600px; 
     left: 50%; 
     margin-left: -600px; 
     position: fixed; 
     top: 0; 
     width: 1200px; 
     z-index: -1; 
    } 
    </style> 
    </head> 
    <body title="body"> 
    <div id="content" title="#content"> 
     <p>content</p> 
    </div> 
    <div id="background" title="#background"> 
     <p>background</p> 
    </div> 
    </body> 
</html>

來源

2010-09-04 22:02:30 danorton

我會使用CSS3媒體查詢。

body{overflow:hidden;} 

@media only screen and (max-width: 970px) { 
    body{overflow:visible;} 
}

首先設置要隱藏的身體溢出，以便它不滾動。然後當屏幕小於970像素時，將其設置回可見狀態，以便滾動。

來源

2013-10-02 14:44:49 user2428593

沒有瀏覽器滾動的Div比瀏覽器更寬

回答

相關問題