僅當頁面尺寸太小時才隱藏溢出

我有一個名爲div的頁面，可以說1000px width和position: relative;，並且在本頁div我有一個徽標position: absolute;和top:-20px; right: -20px。當頁面寬度大於1000像素多個圖像應顯示，但是當頁面寬度等於或大於1000像素溢流應該被隱藏（overflow: hidden;）低。僅當頁面尺寸太小時才隱藏溢出

當我將頁面div中的溢出屬性設置爲overflow: hidden;時，徽標被裁剪，當我選擇visible時，當頁面寬度等於或小於1000px時，我會得到一個水平滾動條。

我的想法解決這個問題是使用JavaScript並根據頁面寬度設置overflow屬性。我更喜歡CSS解決方案，但找不到一個。： -/

有沒有人有建議如何解決這個使用CSS？

謝謝！

來源

2012-02-17 Chris

的解決方案是非常簡單的...

只是使頁面四周的包裝股利。比方說，在網頁的div是1000像素寬度和包裝div有width: 100%。然後，它的設置overflow: hidden爲包裝的div最簡單的方法，並且當頁大小縮小到例如1020px一塊圖像的被裁剪並且當尺寸的進一步縮小到1000像素的水平滾動條顯示，因爲頁面的div（其具有默認overflow: visible）。

就是這樣......在（幾乎）每5年一次的瀏覽器中工作。

來源

2012-02-19 01:20:51 Chris

您可以使用CSS Media查詢（http://www.w3.org/TR/css3-mediaqueries/）根據屏幕大小更改佈局。即：

@media screen and (max-width: 1000px) { 
#page { overflow: hidden; } 
} 

#page { overflow: visible; }

來源

2012-02-17 22:10:16 Malk

這聽起來很不錯，但確實對舊的瀏覽器（IE 7，8？）這個工作呢？ – Chris 2012-02-17 22:43:06

您應該使用CSS（不適用於瀏覽器佈局問題的Javascript） - 並使用@media查詢。

像這樣，你想要水平滾動顯示的地方是1200px及以下。

@media屏幕和（最小寬度：1200像素）{ HTML {溢出 - X：隱藏;}

棒，在樣式表中的端部，或在標題中的某些標記進行測試。

來源

2013-01-09 04:34:10

僅當頁面尺寸太小時才隱藏溢出

回答

相關問題