0

我无法在普通浏览器上复制这个问题，但它发生在移动设备上。

我使用左侧菜单中的 facebook 样式幻灯片，然后将主屏幕推到右侧，我还将 a 应用position:fixed到主屏幕，因此我可以滚动左侧的菜单，而无需移动现在推到的主屏幕。

问题是当我这样做时，右侧的所有内容都会被压扁，例如，在主屏幕上使用width:100%的主页图像会缩小以适应屏幕右侧的微小空间。文本也都试图适应狭小的空间。这仅在主页变得固定时发生。

似乎width:auto是导致问题的原因。

这是jquery...

$(document).ready(function() {
$('.btn-navbar ').toggle( 
function() {
    $('#pop-out-left').animate({ left:0 }, 100);
    $('.container').animate({ left:'87%' }, 100);
     $('.container').addClass("fixed-position");
    $('#footer').animate({ left:'87%' }, 100);
    $('#footer').addClass("display-none");
    $('#language_strip').addClass("fixed-position");

}, 
function() {
    $('#pop-out-left').animate({ left: '-87%' }, 100);
    $('.container').animate({ left: 0 }, 100);
     $('.container').removeClass("fixed-position");
    $('#footer').animate({ left: 0 }, 100);
    $('#footer').removeClass("display-none");
    $('#language_strip').removeClass("fixed-position"); 
    $(document).scrollTop(0);
}
);

CSS...

.fixed-position {
position:fixed !important;
}

#pop-out-left { 
overflow:hidden;
position:absolute; 
width: 80%; 
border: 1px dotted gray; 
background: #fff; 
color: white; 
top:0px; 
left: -82%; 
height:auto;
min-height:600px;
padding-bottom: 00%;

}

.container {
width: auto;
 }
4

0 回答 0