Question

预览：

https://dl.dropboxusercontent.com/u/54191672/theme/index.html

最初我尝试使用bootstrap的附加插件，但滚动时出现故障：

https://dl.dropboxusercontent.com/u/54191672/affix/index.html

我一直如此坚持这一点，我不确定为什么会把它弄糟。我想要的只是一个固定的侧边栏，而我顺利地向下滚动图像。

  <div id="sidr" class="sidebar col-xs-2 col-md-3">
        <div class="sidebar-inner-container">
            <div class="logo-container">
                <img src="images/logo.png" alt="" class="logo">
            </div><!-- /.logo-container -->
            <nav class="main-nav">
                <ul class="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="journal.html">Journal</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </nav>

            <footer class="main-footer">
                <div class="social">
                    <a class="social-icon icon-facebook" href="#"></a>
                    <a class="social-icon icon-googleplus" href="#"></a>
                    <a class="social-icon icon-behance" href="#"></a>
                    <a class="social-icon icon-rss" href="#"></a>
                </div>
            </footer>
        </div><!-- /.sidebar-inner-container -->
    </div><!-- /.sidebar -->

CSS：

.sidebar {
  background: #fff;
  padding-top: 65px;
  padding-left: 40px;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.15);
  height: 100%;
  z-index: 100;
}

我该如何解决这个问题？

Answer 1

如果您使用固定位置为侧边栏，则需要为主要元素留出一个与边栏元素宽度相同的边距：

试试这个CSS：

.main-content{
    margin-left: 400px;
}

位置固定混乱布局

1 个答案: