做一个固定的，敏感的div

Question

我使用自举设计制作的左侧杆高度为100％。左边有一个内容区域。左侧边栏使用位置固定：固定，以便在向下滚动时保持固定。它在桌面上很好。

然而，当从移动设备上观看时，固定边栏就像其他任何响应式设计一样走到顶端。精细。但是桌面右侧的内容区域位于侧边栏的顶部而不是底部，导致位置：固定。

我该如何解决？将侧边栏固定在桌面上并使其在移动设备上响应？

抱歉，我正在使用手机

HTML

<div class='col-md-3' id='sidebar'>Sidebar</div>
<div class='col-md-9'>
content
</div>

CSS

#sidebar 
{
 height :100%;
 position : fixed;
 }
html,body
 { 
 height : 100%;
 }

Answer 1

建议：使用 @media查询

@media (max-width: 768px) { /* mobile view */
  #sidebar  {
    position: relative;
    // or any other property to achieve the desired
  }
}

MDN CSS/Media_queries
Css-Tricks Suggested Standard Media Sizes

Answer 2

你必须使用'position：fixed;'相反，如果由于Safari中的某些布局问题或Mac上的Chrome而面临'绝对'！我也在一个应用程序中遇到了这个问题。尝试在Chrome开发者论坛上搜索解决方案。

Answer 3

如果没有更多的诊断就很难诊断，但是你可以尝试以下方法：

在#sidebar而不是使用height: 100%;上使用：

top: 0;
bottom: 0;
left: 0;