html - 如何使列内的固定导航栏正确调整大小？

我创建了一个左侧导航栏，当用户滚动时它固定在顶部，这部分工作得很好。但是，当我调整分辨率时，有时左侧导航栏会移动到主要内容的顶部，我无法弄清楚如何使用固定的 div 来防止这种情况发生。

额外的问题，如何使左侧导航栏的整个 col-md-2 列具有红色背景？

picture to explain what is going on

在 fiddle 中我没有添加顶部导航。

fiddle : http://jsfiddle.net/9ayLc825/1/

<body>
    <div class=" col-md-2">
        <ul class="nav nav-pills nav-stacked mainMenu ">
            <li>
                <a><i class="fa fa-tags fa-2x"></i>xxxxxx <span class="caret pull-right margin-top"></span></a>
                <ul class="nav nav-pills nav-stacked">
                    <li>xxxxxx</li>
                </ul>
            </li>
            <li><a><i class="fa fa-cog fa-2x"></i>xxxxx</a></li>
            <li><a><i class="fa fa-users fa-2x"></i>xxxxxx <span class="caret pull-right margin-top"></span></a></li>
            <li><a><i class="fa fa-area-chart fa-2x"></i>xxxxxx</a></li>
        </ul>

    </div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-12">
  MAIN
            </div>
        </div>
    </div>

</body>

fiddle :http://jsfiddle.net/9ayLc825/

最佳答案

尝试给 html、body 宽度和高度 100%，基于使用 css 媒体查询的导航栏宽度和高度百分比，如下所示。