Question

我希望我的侧边栏能够在打开时推送内容，但是我的固定导航位于Left的位置：0px;相对于veiwport而不是相对定位的父元素。我的导航是100％

我的侧边栏在Firefox上工作正常，但在chrome中突破了父级

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <div id="sidebar">

    </div>

    <div class="content">
        <div id="nav">
            <p class="button"></p>    
        </div>
    </div>

<script type="text/javascript">

    $('.button').click(function(){
        $('.content').toggleClass('slide');
        });

</script>

</body>
</html>

我的CSS

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype'),
        url('fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{
    margin: 0;
    padding: 0;
}

#sidebar{
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    background: rgb(60,60,60);
    float:left;
    height: 600px;
    z-index: -1;
}

.content{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height:600px;
    background: #FFF;
    -moz-transition:all 0.4s ease-in-out;
    -webkit-transition:all 0.4s ease-in-out;
}

.slide{
    left: 250px;
}

#nav{
    position: fixed;
    top: 0;
    background: #0af;
    width: 100%;
    box-shadow: 1px 1px #ddd;
}

 #nav p:before{
    content: "\e000";
}

.button{
    font-family: 'icomoon';
    font-size: 2em;
    color: #FFF;
    cursor: pointer;
    margin: 10px;
}

VIEW HERE

Answer 1

将position: absolute;添加到.slide{...} css将解决Chrome中的问题，您可能还必须在删除.slide类时修复动画

祝你好运

[UPDATE] 这是一个工作示例：http://jsfiddle.net/QdVKD/1/

修复页面的宽度和未链接的滚动：http://jsfiddle.net/QdVKD/2/

固定位置相对于父Div与滑动侧边栏

1 个答案: