1

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

我试图通过将内容放入div容器内部div，将容器设置div为具有bottom值，将内部 div 设置为容器 div 高度的 100%，并设置overflow: auto内部 div 来解决此问题。这个解决方案的问题在于，在更大的屏幕上，内部 div 的底部会出现大量难看的空白。

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

4

2 回答 2

0

How about a CSS @media query?

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

When the document is small enough, this sticky part will shoot to the top so it doesn't interrupt the other content on your site. My microblog, http://jscal.es, uses this technique.

于 2012-06-02T05:17:57.243 回答
0

我认为您应该使用 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-02T09:49:05.677 回答