0

我希望我的侧边栏在打开时将内容推送到我已经实现但我的固定导航保持在 Left: 0px; 相对于 veiwport 而不是相对定位的父元素。我的导航是 100%

我的侧边栏在 Firefox 上运行良好，但在 chrome 中脱离父级

链接到 jsfiddle

<!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;
}

在这里查看

4

1 回答 1

0

添加position: absolute;到.slide{...}css 将修复 Chrome 中的问题，当 .slide 类被删除时，您可能还需要修复动画

祝你好运

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

修复页面的宽度和不需要的滚动：http: //jsfiddle.net/QdVKD/2/

于 2013-05-21T21:08:32.017 回答