當我縮放時，CSS 100％沒有被尊重

我想在整個屏幕上以100％的寬度在整個屏幕上有一個黃色矩形＃box-over。默認縮放級別Google Chrome（我沒有試過所有的瀏覽器），它工作正常，除非我放大超過300％左右，然後黃色框不再是100％的屏幕剪輯和水平滾動酒吧出現在底部。我似乎無法弄清楚如何解決這個問題。當我縮放時，CSS 100％沒有被尊重

的jsfiddle http://jsfiddle.net/VySGL/1/

SCREENSHOT enter image description here

SOURCE

 <style type="text/css"> 
     body { 
      padding: 0; 
      margin: 0; 
      background-color: black; 
     } 

     #box { 
      width: 100%; 
      position: relative; 
     } 

     #box #box-over { 
      z-index: 1; 
      width: 100%; 
      height: 50px; 
      background-color: yellow; 
      position: absolute; 
      top:10px; 
      opacity:0.8; 

     }   

     #box #box-over .box-column { 
      width: 900px; 
      margin: 0 auto; 
      zoom: 1; 
      position: relative; 
      height: 50px; 
     } 
     </style> 

    </head> 
    <body> 

     <div id="box"> 
      <div id="box-over"> 
       <div class="box-column"> 
       </div> 
      </div> 
     </div> 

    </body> 
</html>

來源

2013-01-22 user391986

使用100％的寬度另一種方法是設置左，右爲0這樣的CSS ...

見JSFiddle

#box #box-over { 
    z-index: 1; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color: yellow; 
    position: absolute; 
    top:10px; 
    opacity:0.8; 

}   

#box #box-over .box-column { 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    zoom: 1; 
    position: absolute; 
    height: 50px; 
}

使用左，右性能保證你永遠不超過100 ％寬度即使添加填充（請參閱this JSFiddle）。

例如，當你添加填充到你的div它將100％加上填充。請參閱JSFiddle

來源

2013-01-22 23:56:50

更喜歡這個！因爲用另一種方法，如果我在小屏幕上查看它，它會破壞它無法讀取，這允許內容保持組織並且滾動條顯示。非常感謝這兩個！ – user391986

我可以清除絕對的div嗎？或者是我唯一的選擇，用margin-top抵消下一個div？ – user391986

當你縮放時，你內在的900px div會溢出外部div的寬度100%寬度。你可以給一個max-width:100%到.box-column：

#box #box-over .box-column { 
    [...] 
    max-width: 100%; 
}

Fiddle

這將迫使內DIV尊重容器的寬度。

另一種解決方案是將#box-over的overflow設置爲hidden或scroll。通過這種方式，內部div仍具有寬高比等寬的900px。

來源

2013-01-22 23:41:10

夢幻般的最大寬度作品謝謝！我試圖理解，儘管如此，盒子溢出100％的寬度，這是如何工作的。 http://jsfiddle.net/VySGL/7/ – user391986

@ user391986很簡單，根據定義，定義寬度值高於容器的內部'div'將溢出其容器。你也可以在內部元素上應用'width：200％'來檢查它。這就是爲什麼我們有'overflow'屬性來控制如何處理溢出。 –

非常感謝Fabricio！ – user391986

當我縮放時，CSS 100％沒有被尊重

回答

相關問題