什麼是在小屏幕上固定定位的html div的一個很好的解決方案？

我有一個固定的位置div在我正在構建的HTML頁面的右側。這個div意味着在頁面滾動時變得粘滯。問題是，在較小的屏幕上，某些內容被隱藏，因爲它不完全適合頁面（例如：http://jsfiddle.net/uJN4Q/）。什麼是在小屏幕上固定定位的html div的一個很好的解決方案？

我試圖通過投入div容器div內的內容，設置容器div具有bottom值，內格設置爲100％的div容器的高度，並在設定overflow: auto來解決這個問題內部分區。這個解決方案的問題是，在更大的屏幕上，內部div底部會出現大量難看的空白。

任何想法如何使它可以看到整個文本，div仍然是position: fixed，div的底部「粘」到最後一行文本，所以底部沒有空白的div？

來源

2012-06-02 chromedude

CSS @media查詢怎麼樣？

@media (max-width: 600px) { 
    #sticky_part { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 35px; 
    } 
}

當文件足夠小時，這個粘性部分會射到頂部，因此它不會中斷您網站上的其他內容。我的微博http://jscal.es使用這種技術。

來源

2012-06-02 05:17:57

其實這個問題是窗口的高度不是寬度。 – chromedude

@chromedude你可以用'max-height'替換'max-width'。無可否認，我對你的問題有點困惑，但是你可以用@media查詢來實現這個功能。也許在'max-height'條件下，你可以讓父div（height：100％）具有'overflow-y：scroll'屬性。 –

我認爲你應該使用CSS媒體查詢來檢測設備寬度&高度相應地將CSS應用於該div。

@media screen and (min-width: 960px) { 
    div{position:absolute;/*Or whatever u want*/ 
}

您可以使用JavaScript與這裏檢測設備就是做這個用css & JavaScript的鏈接：

http://css-tricks.com/resolution-specific-stylesheets/

來源

2012-06-02 09:49:05 SVS

什麼是在小屏幕上固定定位的html div的一個很好的解決方案？

回答

相關問題