协助推送菜单

【问题标题】：Asstance with a push menu协助推送菜单
【发布时间】：2015-11-21 01:05:18
【问题描述】：

我遇到了推送菜单的问题。我正在使用此站点的推送菜单：http://callmenick.com/post/slide-and-push-menus-with-css3-transitions

我遇到的问题是主按钮菜单。当您打开然后关闭它时，所有内容都会稍微向左移动（参见屏幕截图）。页面推送菜单没有这个问题，当您在打开和关闭主菜单后打开页面菜单时，所有内容都会重新对齐。页面推送菜单没有任何问题。

有人可以看看我的 HTML 和 CSS，看看我是否遗漏了什么。

您可以在此处查看问题：http://designs.totaleeyou.com/jml-development/header-1/h1-menu-3.html#top

【问题讨论】：

您使用的是哪个浏览器？在 Chrome OSX 上运行良好。
对我来说它出现在所有最新的浏览器中。它也发生在我的手机上。

标签： javascript html css

【解决方案1】：

所以我需要修改 header.article 删除宽度：100vw;

header.article {
background-attachment: scroll, scroll;
background-clip: border-box, border-box;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 140, 153, 0.6), rgba(0, 140, 153, 0.6)), url("../images/design/lt-campus.jpg");
background-origin: padding-box, padding-box;
background-position: 0 0%, 0 0;
background-repeat: repeat, repeat;
background-size: cover;
height: 265px;
width: 100vw; /* Remove this */
}

虽然上面的代码修复了这个问题的桌面版本，但我不得不对这个问题的移动版本进行额外的更改。我不得不从 padding:5px; 更改填充。填充：5px 0;

#search-container {
background-color: #fdbc5d;
margin-bottom: 30px;
padding: 5px 0; /* CHANGE THIS */
position: absolute;
top: 84px;
width: 100%;
}

【讨论】：