制定一个固定的响应式div

Question

I have this design made using bootstrap there is a left side bar 100% in height. And there is a content area on the left. The left sidebar is fixed using position : fixed so it stays fixed when scrolling down. It's fine on desktop.

However when it's being viewed from mobile the the fixed sidebar goes to the top like in any other responsive design. Fine. But the content area on the right in desktop comes on top of the sidebar not bottom to it cause the position : fixed.

How can i fix it? Keep the sidebar fixed in desktop and make it responsive on mobile?

Sorry i'm being on mobile

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

Suggestion: use @media queries

@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

You must be using 'position: fixed;' instead if 'absolute' due to some layout issue faced in Safari or Chrome on Mac! I also faced this problem in an app. Try to search the solution on Chrome Developers forum.

Answer 3

It is tough to diagnose without more to go from, however you oculd try the following:

On #sidebar instead of using height: 100%; use:

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