600-1024px范围内网站右侧的超出死区

Question

我无法解释这种行为，我现在已经调查了这个问题3天了。有问题的网站是here。请原谅它的臃肿状态和其他缺点，这不是由专业网页设计师完成的 - 它处于发展/实验状态。

在特定的屏幕尺寸范围内，我的网站 - 不是适合屏幕尺寸，因为它已在该屏幕范围内进行编码，而是进入x滚动并展示网站右侧的死角。

查看此simulation和向右滚动以查看死区。请注意，在600 - 1024 px的屏幕宽度范围内不应该有任何滚动 - 我希望内容填满可用空间而不是更多，所以我将所有更高级别的div设置为最大宽度100％。

屏幕截图显示我的意思：

根据3组媒体查询有3个断点，我假设在@media only screen and (min-width: 1024px)规则处于活动状态时观察到行为的活动断点：

@media only screen and (min-width: 1024px){

div.sidebar {
font-size: 10pt !important;
width: 30% !important;
display: table-cell !important;
vertical-align: top;
clear: right !important;
float: left !important;
}


div#page{
margin: 0 auto !important;
padding: 0 !important;
max-width: 80vw !important;
}

main#content, .site-content{
width: 70% !important;
float:left;
}

div#super-content{
width: 100% !important;
}

div#primary{max-width: 100% !important}

} /* end media query */




/* up to 1024*/

@media only screen and (max-width: 1024px){

div.sidebar {
font-size: 10pt !important;
width: 30%;
display: table-cell !important;
vertical-align: top;
clear: right !important;
float: left;
}


div#page{
margin: 0 auto !important;
padding: 0 !important;
max-width: 100% !important;
}

div#primary{max-width: 100% !important}

main#content, .site-content{
float: left;
width: 70% !important;
}

div#super-content{
max-width: 100% !important;
}

} /* end media query */




/* up to 600 */
@media only screen and (max-width: 600px){

main#content{
width: 100% !important;
}

.sidebar{
float: left;
vertical-align: initial !important;
display: block !important;
width: 100% !important;
}

#page{
max-width: 100% !important;
}


main#content{padding-right: 0;}

} /* end media query */

我真的不知道从哪里开始发布HTML，但是因为我已经发布了website link，所以进入浏览器开发者模式以查看整体HTML应该是微不足道的应用于每个容器的结构和CSS规则。

Answer 1

这通常是由一个从其容器中伸出的流氓元素引起的。

你可以经常通过将overflow:hidden应用于容器以找出它所在的容器来找出该元素的位置，当空间消失时你会知道它在容器内。

我通过将此问题应用到您网页上的header元素，在第二次尝试找到了您的问题。

经过一番调查后，它实际上是由一个子导航引起的。

如下所示：

所以，如果你想解决这个问题，你可以将下拉菜单定位到右边而不是左边（因此菜单会反过来），但请确保只在最右边的菜单上执行此操作项目，否则你会在导航的另一边遇到完全相同的问题。

看来你正在使用第三方插件来创建这个导航，所以，如果你不想深入研究这个问题，我会推荐使用{{3相反。

希望有所帮助，祝你好运。