Question

我正在创建一个具有“一体化”布局的网页。当您单击侧栏中的链接时，主内容将向右滑动，并由右侧滑入的另一个内容块替换。我已经做了很多次，但在某些情况下，这种奇怪的事情发生在像<body>没有宽度的地方。页面正确加载，然后一旦完全加载，<body>的宽度就会消失。

如果我检查页面上的元素并在left关闭然后再打开.slide属性，它就能完美运行。
还应该注意的是，当这个页面开始发生时我没有对页面进行任何改动。我刚刚精神焕发，突然之间爆发了。我也拿走了jQuery并且问题仍然存在。

以下是相关代码：

HTML

<ul id="nav">
    <li><a href="#" slide="wrapper" class="toggle">home</a>
    <li><a href="#" slide="feedback" class="toggle">feedback</a>
    <li><a href="#" slide="request" class="toggle">request</a>
</ul>
<div id="request" class="slide">
    ...
</div>
<div id="feedback" class="slide">
    ...
</div>
<div id="wrapper" class="slide active">
    <div id="posts">
        ...
    </div>
</div>

CSS

#wrapper {
    width:100%;
    height:100vh;
    position:absolute;
    top:0;
    padding:70px 0;
    box-sizing:border-box;
    overflow:auto;
}
#posts {
    margin:0 auto;
    width:430px;
}
#feedback, #request {
    background:#fafafa;
    width:430px;
    padding:25px;
    border:5px solid #fafafa;
    position:absolute;
    top:70px;
    margin-left:calc(50% - 215px);
    box-sizing:border-box;
    max-height:calc(100vh - 140px);
    overflow:auto;
}
.slide {
    left:100%;
    -webkit-transition: all 0.6s ease-in-out;
       -moz-transition: all 0.6s ease-in-out;
         -o-transition: all 0.6s ease-in-out;
            transition: all 0.6s ease-in-out;
}
.active {
    left:0;
    -webkit-transition: all 0.6s ease-in-out;
       -moz-transition: all 0.6s ease-in-out;
         -o-transition: all 0.6s ease-in-out;
            transition: all 0.6s ease-in-out;
}

的jQuery

$('.toggle').click(function(e){
    e.preventDefault();
    $('.slide').removeClass('active');
    var id = $(this).attr("slide");
    $('#'+id).addClass('active');
});

它看起来像什么：

它应该是什么样的：

Link to the page

提前致谢。

Answer 1

将#feedback和#request从position:absolute更改为position:fixed似乎可以解决问题。

没有宽度

1 个答案: