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表达式中，值和减号之间必须有空格 - 否则某些浏览器无法正确解释表达式。

使用使用absolute和float：left的内容修复的位置

1 个答案: