作出一個固定的和響應div

Question

我有這個設計使用bootstrap有一個左側酒吧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

您必須使用 '的位置是：固定;'相反，如果由於Safari或Chrome在Mac上面臨一些佈局問題導致「絕對」！我也在應用程序中遇到過這個問題。嘗試在Chrome開發者論壇上搜索解決方案。

Answer 3

辛苦沒有更多的診斷從走，但是你oculd嘗試以下方法：

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

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