制作一个固定且响应迅速的 div答案

【问题标题】：Make a fixed and responsive div制作一个固定且响应迅速的 div
【发布时间】：2013-12-17 04:44:00
【问题描述】：

我使用 bootstrap 进行了这个设计，左侧栏的高度为 100%。左侧有一个内容区域。左侧边栏使用 position : fixed 固定，因此在向下滚动时保持固定。在桌面上没问题。

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

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

对不起，我正在使用手机

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%;
 }

【问题讨论】：

【解决方案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

【讨论】：

【解决方案2】：

如果没有更多信息，很难进行诊断，但是您可以尝试以下方法：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：