挤压一个无响应的网页

Question

我有以下jsfiddle链接

我试图挤压网页以显示正确的广告

http://jsfiddle.net/azgjr8k0/

适用于响应式网站，但在上面给出的小提琴链接。它不会挤压固定宽度的div。无响应的网站。 我能做到的任何方式然后让我知道

这是css

#test {
  position:fixed;
  width:160px;
  background:blue;
  right:-160px;
  top:0px;
  bottom:0px;
  -webkit-transition: all ease-in-out 1s;
  -moz-transition: all ease-in-out 1s;
  transition: all ease-in-out 1s;
 }
#test.show {
  right:0; 
}
#container{
  margin-right:0;
 -webkit-transition: all ease-in-out 1s;
 -moz-transition: all ease-in-out 1s;
 transition: all ease-in-out 1s;
}
#container.squeezed {
  margin-right:160px;
}


javscript/jquery code
  window.onscroll = function () {
    if (pageYOffset > 100) {
      $("#test").addClass("show");
      $("#container").addClass("squeezed");
    } else if (pageYOffset < 100) {
      $("#test").removeClass("show");
      $("#container").removeClass("squeezed");
   }

 }

Answer 1

以下是解决方案：

http://jsfiddle.net/austinthedeveloper/azgjr8k0/4/

如果你想设置宽度但让它们有响应，请确保它们被设置为最大宽度。

#box{
    width: 100%;
    max-width:500px;
}