使用 position fixed 和使用 absolute 和 float:left 的内容

Question

我正在使用侧边栏菜单，该菜单使用固定位置并使用 JavaScript 从左向右滑出。除了一页对我来说很麻烦之外，这工作正常。麻烦的页面包含固定的侧边栏和右侧的内容，其中包含绝对位置和浮动元素，这些元素应该填充屏幕与侧边栏区域分开。盒子的宽度应为自由区域的 50% space。目前我使用的方法导致盒子不均匀，我已经尝试了几种方法来解决这个问题，但没有成功。

我认为问题是一个结果，因为 left:100px 以前在父级 div element.I 上使用过，包括问题的 JsFiddle，使这个问题更容易社区帮助我。

下面是HTML代码：

<div class="menuWrapper">
    <div class="menubarTrigger">
        <span>Menu Bar</span>
    </div>
</div>
<div class="contentWrapper">
    <div class="servicesWrapper">
        <ul>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Site Maintence</a></li>
            <li><a href="#">Consultancy</a></li>
            <li><a href="#">Misc</a></li>
        </ul>
    </div> 
</div>

下面是CSS代码：

body, html{margin:0;}
.menuWrapper{background-color:#000;height:100%;position:fixed;z-index:100;}
.menubarTrigger{background-color:#1c1c1c;cursor:pointer;float:right;height:100%;width:100px;color:white;}
.menubarTrigger span{position:absolute;top:50%;left:18%;}
.contentWrapper{height:100%;left:100px;position:fixed;top:0;width:100%;}
.servicesWrapper{height:100%;left:0;position:absolute;top:0;width:100%;}
.servicesWrapper ul{height:100%;left:0;margin:0;position:absolute;top:0;width:100%;z-index:10;padding:0;}
.servicesWrapper ul li{background:none repeat scroll 0 0 #bbb;display:table;float:left;height:50%;text-align:center;width:50%;}
.servicesWrapper ul li a{color:#fff;display:table-cell;font-size:40px;letter-spacing:3px;position:relative;transform:translateY(50px);;vertical-align:middle;}
.servicesWrapper ul li:nth-child(1){background-color:#ccc;}
.servicesWrapper ul li:nth-child(2){background-color:#ddd;}
.servicesWrapper ul li:nth-child(3){background-color:#eee;}

您可以找到 Jsfiddle here 并且可能需要仔细观察才能发现右侧的框与左侧的宽度不同。

Answer 1

.contentWrapper{height:100%;left:100px;position:fixed;top:0;width:calc(100% - 100px);}

注意：在 calc 表达式中，值和减号之间必须有空格 - 否则某些浏览器无法正确解释表达式。

使用 position fixed 和使用 absolute 和 float:left 的内容

Using position fixed with content that uses absolute and float:left

html

css

css-position

absolute