Javascript 页面溢出时展开图像和导航菜单

我有一个网站，其中2页内容在小屏幕上溢出，这意味着你必须水平滚动才能查看所有内容。因此，屏幕顶部的菜单和徽标图像在这两个页面上被切断。菜单和徽标都由母版页加载。我尝试通过使用媒体查询和指定特定宽度来解决此问题，这确实解决了这两个页面的问题，但它导致所有页面在小屏幕上滚动，因为此修复会影响母版页。我认为这是一个非常基本的问题，但令人惊讶的是，我找不到任何解决办法。我想知道是否有人对如何解决这个问题有任何想法

编辑：从我的母版页和样式文件发布代码

正文{
字体系列：Arial、Helvetica、无衬线字体；
背景：#ffffff；
最大宽度：无；
溢出：滚动；
}
桌子{
边框间距：0px
}
运输署{
填充：2px；
边际：0px；
边框间距：0px
}
/*-----------------------------------------------------------------标题标志------------------------------------------------------------------------------------------------*/
.反应迅速{
宽度：100%；
高度：自动；
}
/*------------------------------------------------------------------------菜单-----------------------------------------------------------------------------------------*/
navbar先生{
宽度：100%；
溢出：隐藏；
背景色：#333；
字体系列：Arial、Helvetica、无衬线字体；
边际上限：0px；
填充顶部：0px；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.navbar a:悬停，.dropdown:悬停.dropbtn{
背景色：红色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.下拉：悬停.下拉内容{
显示：块；
}
/*-----------------------------------------------------------------格式化------------------------------------------------------------------------------------------------*/
.
.2以下{
文字装饰：下划线；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：#3A4 a37；
}
.box_应用程序{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：#3A4 a37；
边框：1px实心#C4D0C1；
}
.验证器{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：#F00000；
}
.validator_mini{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：#F00000；
}
.validator_mini2{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：#000080；
}
.字幕{
字体大小：粗体；
背景色：#093145；
边框底部样式：实心；
边框底色：#3A4A37；
边框底宽：1px；
文本对齐：左对齐；
颜色：白色；
}
.textbox\u填充{
边框：1px实心#C4D0C1；
填充：4px；
颜色：#3A4 a37；
字体系列：arial、Helvetica、无衬线字体；
}
.title_times_new{
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：32px；
颜色：#4D6145；
字体大小：粗体；
字体：斜体；
文本对齐：居中；
}
.title_times_new2{
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：16px；
颜色：#4D6145；
字体大小：粗体；
字体：斜体；
}
.合约清单{
左边距：自动；
右边距：自动；
}
/*-------------------------------------------------------------------新合同格式----------------------------------------------------------------------*/
#合同表{
宽度：600px；
}
html，正文{
保证金：0；
填充：0；
}
.img响应{
显示：内联块；
最大宽度：100%；
高度：自动；
}
.放下{
左：0px；
右边距：90像素；
}
.流动{
宽度：1200像素
}
/*-------------------------------------------------------------------媒体查询----------------------------------------------------------------------*/
@仅介质屏幕和（最大宽度：1280px）{
navbar先生{
宽度：1670px；
边际上限：0px；
}
.反应迅速{
宽度：1670px；
}
.合约清单{
右边距：0px；
左缘：1%；
}
}

合同
信件
退出

您可以使用禁用水平滚动

overflow-x:hidden;

---

在您的CSS中，您似乎正在手动滚动您自己的响应媒体查询？我建议使用BootstrapV3——您可以使用PackageManager来设置整个程序

在媒体查询中，使用像素将固定宽度设置为1670px。在RWD中，从不使用固定的宽度单位；它总是按百分比进行的。您可以通过使用引导来避免这些问题，因为所有繁重的工作都已经为您完成了

对于您的特定问题，您应该有不同的媒体屏幕