Question

我遇到媒体查询和侧边栏有固定位置的问题。基本上，当视口变得太窄时，主内容会向左移动，然后位于侧边栏下方。我试图通过媒体查询将位置设置为静态，但是它不能正常工作/看起来像我想要的那样。

@media (max-width: 991px) {
    #sidebar {
        position: fixed;
    }
}

以下是位置静态的http://jsfiddle.net/ym7sQ/2/

@media (max-width: 991px) {
    #sidebar {
        position: static;
    }
}

您可以看到侧边栏位于内容中，但我希望它覆盖顶部和底部，就像它高于991px一样。低于768它的堆叠是可以的，因为没有侧边栏和主要内容的空间。你能帮帮我吗？感谢。

Answer 1

@media (max-width: 991px)
#sidebar {
position: fixed;
}

我认为你应该使用它。

Answer 2

侧边栏与主要内容重叠是因为元素.logo具有固定宽度（150px）和固定的左/右边距（均为40px），因此.logo元素的整个宽度为230px ，当页面足够窄时，它大于#sidebar元素的宽度，因此#sidebar元素被展开。

<强>解决方案：
使.logo元素宽度动态化，如：

.logo {width：80％;保证金：40px auto 70px; }

然后，您可能必须使用<img>标记来显示徽标，而不是使用背景。

Answer 3

在http://jsfiddle.net/ym7sQ/14/show

上查看

来源：http://jsfiddle.net/ym7sQ/14/

很抱歉改变了很多。但主要修正案是将整个 #sidebar元素 移出容器。

HTML：

<div id="top">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-md-push-3">
                 <h2>Home</h2>
            </div>
        </div>
    </div>
</div>
<div id="sidebar" class="col-sm-3"><a href="#" class="logo"></a>
    <nav role="navigation">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </nav>
    <hr />
    <p>info@domain.com
        <br />123 456 789</p>
    <p>Something something</p>
</div>
<div id="content">
    <div class="container">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-9">
                <section id="main">
                    <div id="slider" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#slider" data-slide-to="0" class="active"></li>
                            <li data-target="#slider" data-slide-to="1"></li>
                            <li data-target="#slider" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="http://placekitten.com/1280/720" alt="Slide 1" />
                            </div>
                            <div class="item">
                                <img src="http://placekitten.com/1280/720g" alt="Slide 2" />
                            </div>
                            <div class="item">
                                <img src="http://placekitten.com/1280/720" alt="Slide 3" />
                            </div>
                        </div> <a class="left carousel-control" href="#slider" data-slide="prev">

                            </a>
 <a class="right carousel-control" href="#slider" data-slide="next">

                            </a>

                    </div>
                    <div class="main-bottom">
                        <img src="http://placekitten.com/300/300" alt="Image" /> <a href="contact.html">
                            <img src="http://placekitten.com/100/100" alt="France" />
                            </a>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-md-push-3">
                <p>2013 &copy; All rights reserved.</p>
            </div>
        </div>
    </div>
</div>

CSS固定位置和媒体查询

3 个答案: