Question

请看这个JsFiddle。 JSFiddle

<div class="main" >
    <div class="menufixedleft">
        Fixed Menu Should not Scroll
    </div>

    <div class="content">
        Main Content
    </div>

      <div class="rightsidebar">
          Right Side Bar
    </div>  
</div>

我正在尝试左边的菜单div固定，右边的中心和侧边栏上的内容。当我有中心和右侧杆，向左浮动时，它不起作用。中心div覆盖左侧的固定div。

我唯一的选择是将2个div（中间和右侧边栏）向右浮动吗？

谢谢！

Answer 1

根据您希望的外观main或padding-left:100px; margin-left:100px为{{1}}腾出空间（100px来自固定元素的宽度）

Updated jsFiddle

Answer 2

查看此JSFiddle：http://jsfiddle.net/J2tt6/1/

这是CSS代码：

body {
    padding: 0;
    margin: 0;
}

.main{
    height:500px;
    width:550px;
    background:pink;
    position:relative;
}

.menufixedleft{
    height:200px;
    width:100px;
    position:fixed;
    left:0;
    top:20px;
    background:green;

}

.content{
    height:400px;
    width:200px;
    background:blue;
    position: absolute; /* should not float, as fixed elements are above everything else. */
    left: 100px;
}

.rightsidebar{
   height:200px;
    width:100px;
    background:red;
   position: absolute; /* once again, don't float. */
    left: 300px;

}

Answer 3

当您将position: fixed设置为左侧导航时，它将从布局中删除。要保留它，您需要将菜单包含在另一个元素中，该元素保留在布局中。

HTML：

<div class="main">

    <div class="menu">
        <div class="affix">
            Fixed Menu Should not Scroll
        </div>    
    </div>    

    <div class="content">
        Main Content
    </div>

    <div class="rightsidebar">
        Right Side Bar
    </div>

</div>

CSS：

.menu {
    float: left;
    min-height: 1px;
    width: 100px;
}

.affix {
    height: 200px;
    width: 100px;
    position: fixed;
    left: 0;
    top: 20px;
    background: green;
}

JS Fiddle

具有固定位置的DIV以及浮动DIV不起作用

3 个答案: