Question

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

奖金问题，如何让左侧导航为整个col-md-2列设置红色背景？

picture to explain what is going on

在小提琴我没有添加顶部导航。

小提琴： 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>

小提琴：http://jsfiddle.net/9ayLc825/

Answer 1

根据使用css媒体查询使用导航条宽度高度百分比，尝试给出html，正文宽度和高度100％。如下所示。

html,body{
height: 100%;

宽度：100％; }

@media (max-width: 900px) {

.navClass {width：10％; height：20％; //值仅供参考 }

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

1 个答案: