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

【问题标题】：What is a good solution to fixed positioned html divs on small screens?在小屏幕上固定位置 html div 的好解决方案是什么？
【发布时间】：2012-06-02 17:49:05
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html css css-position sticky

【解决方案1】：

CSS @media 查询怎么样？

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

当文档足够小时，此粘性部分会向上移动，因此不会干扰您网站上的其他内容。我的微博http://jscal.es就使用了这种技术。

【讨论】：

其实问题是窗口的高度而不是宽度。
@chromedude 您可以随意将max-width 替换为max-height。诚然，我对您的问题有些困惑，但是您可以尝试使用 @media 查询来使其正常工作。也许在 max-height 条件下，您可以使父 div（高度：100%）具有 overflow-y: scroll 属性。

【解决方案2】：

我认为您应该使用 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/

【讨论】：