Question

我正在构建的HTML页面的右侧有一个固定的位置div。当页面滚动时，此div应该是粘性的。问题是在较小的屏幕上，某些内容是隐藏的，因为它不完全适合页面（例如：http://jsfiddle.net/uJN4Q/）。

我尝试通过将内容放在容器div内的div中来解决此问题，将容器div设置为bottom值，设置内部div为容器div的高度的100％，并在内部div上设置overflow: auto。这个解决方案的问题在于，在较大的屏幕上，内部div的底部会有大量丑陋的空白。

任何想法如何制作以便可以看到整个文本，div仍然是position: fixed，并且div的底部“粘住”到最后一行文本，所以没有空格在div的底部？

Answer 1

CSS @media查询怎么样？

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

当文档足够小时，此粘性部分将向上方拍摄，因此不会中断您网站上的其他内容。我的微博http://jscal.es使用了这种技术。

Answer 2

我认为您应该使用CSS Media查询来检测设备宽度＆amp;高度相应地将css应用于该div。

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

OR

您可以使用Javascript来检测设备这是使用css＆amp; amp;的javascript：

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

在小屏幕上固定定位的html div有什么好的解决方案？

2 个答案: