使用使用 absolute 和 float:left 的内容固定位置

Question

我正在使用侧边栏菜单，该菜单使用固定位置并使用 JavaScript 从左向右滑出。除了对我来说很麻烦的一页之外，这还可以。麻烦的页面包含固定的侧边栏和右侧的内容，其中包含绝对位置和浮动元素，假设除了侧边栏区域之外填充屏幕。框应占可用区域空间的 50% 宽。目前我使用的方法导致不均匀的盒子，我尝试了几种方法来克服这个问题，但没有运气。

我相信这个问题是由于之前在父 div 元素上使用的left:100px 造成的。我已经包含了这个问题的 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 表达式中，值和减号之间必须有空格 - 否则某些浏览器无法正确解释表达式。