<body> 没有宽度
<body> has no width
我正在创建一个具有 "all-in-one" 布局的网页。当您单击侧边栏中的链接时,主要内容会向右滑动并被从右侧滑入的另一个内容块替换。我已经这样做了很多次,但在某些情况下,这种奇怪的事情发生在 <body>
没有宽度的地方。
页面正确加载,然后一旦完全加载,<body>
的宽度就会消失。
如果我检查页面上的元素并将 .slide
中的 left
属性 关闭然后再打开,它会完美运行。
还应该注意的是,当这种情况开始发生时,我没有对页面进行任何更改。我刚刚精神焕发,它突然坏了。
我把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');
});
它的样子:
它应该是什么样子:
提前致谢。
将 #feedback
和 #request
从 position:absolute
更改为 position:fixed
似乎可以解决问题。
我正在创建一个具有 "all-in-one" 布局的网页。当您单击侧边栏中的链接时,主要内容会向右滑动并被从右侧滑入的另一个内容块替换。我已经这样做了很多次,但在某些情况下,这种奇怪的事情发生在 <body>
没有宽度的地方。
页面正确加载,然后一旦完全加载,<body>
的宽度就会消失。
如果我检查页面上的元素并将 .slide
中的 left
属性 关闭然后再打开,它会完美运行。
还应该注意的是,当这种情况开始发生时,我没有对页面进行任何更改。我刚刚精神焕发,它突然坏了。
我把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');
});
它的样子:
它应该是什么样子:
提前致谢。
将 #feedback
和 #request
从 position:absolute
更改为 position:fixed
似乎可以解决问题。