強制瀏覽器忽略來自包裝器的溢出元素

我正在處理一些基本的網頁佈局。問題是，瀏覽器不會忽略從包裝中溢出的元素，並且如果屏幕比1050像素更接近（1050像素是包裝寬度），則添加horzinotal滾動條。看看代碼：強制瀏覽器忽略來自包裝器的溢出元素

HTML

<body> 
    <div id="wrapperMain"> 
     <div id="headerLeftOverflow"></div>    
     <div id="headerRightOverflow"></div> 
     <div id="headerMain"></div> 
    </div> 
</body>

CSS

body {  
    margin: 0; 
    padding: 0; 
    background-color: #f9eacc; 
    text-align: center; 
    font-family: Tahoma , sans-serif; 
    color: #333333; 

} 

div#wrapperMain { 
    width: 1050px; 
    margin: auto; 
    position: relative; 
    height: 800px; 
} 

div#headerMain { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 1050px; 
    height: 565px; 
    background-image: url("../images/header.png"); 
    background-repeat: no-repeat; 
} 

div#headerLeftOverflow { 
    position: absolute; 
    width: 271px; 
    height: 565px; 
    background-image: url("../images/headerLeftOverflow.png"); 
    top: 0; 
    left: -271px;  
} 

div#headerRightOverflow { 
    position: absolute; 
    width: 277px; 
    height: 565px; 
    background-image: url("../images/headerRightOverflow.png"); 
    top: 0; 
    left: 1050px; 
}

不要誤會我的意思。

如果屏幕寬度很寬，我想讓id爲「headerRightOverflow」的div可見。奇怪的是，ID爲「headerLeftOverflow」的div可以正常工作（如果屏幕比1050 px更近，div被隱藏）。

來源

2012-06-08 Daniel.P.

如果我說得對。當屏幕寬度超過1050像素時，需要div出現？ – Katti

如果你想快速的解決方案，這將使滾動條即消失 - 添加

body{overflow-x: hidden;}

但是，我認爲你應該簡單地diffrently編寫代碼，無位置：絕對。

來源

2012-06-08 11:53:33

好吧，好的。你能否告訴我如何重寫我的代碼來獲得這個工作？ –

這取決於你想用這些邊欄來做什麼。當某人有1600px - 1050px的resualtion時，那些元素應該更小，還是應該便宜或者應該保持固定的寬度，並且只能被瀏覽器截取？ :) –

這些元素在其背景上有圖像，當某人的分辨率高於1050像素時，這些元素會提供額外的圖形。 –

正確的CSS wrappermain TI的這種方式

div#wrapperMain { 
overflow:hidden; 
    width: 1050px; 
    margin: auto; 
    position: relative; 
    height: 800px; 
}

來源

2012-06-08 11:31:48

但是這個解決方案隱藏ID爲「headerRightOverflow」的div，我希望它們可見（如果屏幕足夠寬） –

爲什麼你使用的位置：絕對如此之多 – 2012-06-08 11:46:59

我認爲它的最佳方式是如何強制瀏覽器不顯示滾動條。 –

做的最好的辦法是使用CSS3媒體查詢

/* Greater than standard 1050px */ 
@media only screen and (min-width: 1050px) { 
//Your Code here that has to be performed when the screen size is more than 1050 
}

或者你可以使用JavaScript庫像modernizr

Modernizr的是做出最好的網站和工作完全正確的，無論應用程序的起點訪問者使用什麼瀏覽器或設備？

來源

2012-06-08 12:09:33 Katti

強制瀏覽器忽略來自包裝器的溢出元素

回答

相關問題