Javascript 如何阻止页脚div超过页面宽度？

第一个帖子在这里，如果我做错了什么，请原谅我

我已经复制了导航栏的教程，并复制了代码，现在正在修改它，使之成为我自己的作品。无论如何，我自己的唯一代码是我想要在页面底部的Footer div，但是无论我设置了什么宽度，它似乎都比我想要的要宽。窗口中会出现一个滚动条，必须使用它来查看页面的其余部分

我试过使用Width:100%和Width:auto，但似乎都不正确

提前谢谢

$（函数（）{
/**
*对于鼠标指针上的每个菜单元素，
*我们放大图像，同时显示sdt_活动范围和
*sdt_包装跨度。如果元素有子菜单（sdt_框），
*然后我们滑动它-如果元素是菜单中的最后一个元素
*我们向左滑动，否则向右滑动
*/
$（'sdt_menu>li'）.bind（'mouseenter'，function（）{
变量$elem=$（本）；
$elem.find（'img'））
.停止（正确）
.制作动画({
“宽度”：“170px”，
“高度”：“170px”，
“左”：“0px”
}，400，“内陆地区”）
.andSelf（）
.find（“.sdt_wrap”）
.停止（正确）
.制作动画({
“顶部”：“140px”
}，500，“内陆地区”）
.andSelf（）
.find（“.sdt_活动”）
.停止（正确）
.制作动画({
“高度”：“170px”
}，300，函数（）{
var$sub_menu=$elem.find（'.sdt_框'）；
如果（$sub_menu.length）{
左变量='170px'；
如果（$elem.parent（）.children（）.length==$elem.index（）+1）
左='-170px'；
$sub_menu.show（）.animate({
“左”：左
}, 200);
}
});
}).bind（'mouseleave'，function（）{
变量$elem=$（本）；
var$sub_menu=$elem.find（'.sdt_框'）；
如果（$sub_menu.length）
$sub_menu.hide（）.css（'left'，'0px'）；
$elem.find（“.sdt\u活动”）
.停止（正确）
.制作动画({
“高度”：“0px”
}, 300)
.andSelf（）.find（'img'））
.停止（正确）
.制作动画({
“宽度”：“0px”，
“高度”：“0px”，
“左”：“85px”
}, 400)
.andSelf（）
.find（“.sdt_wrap”）
.停止（正确）
.制作动画({
“顶部”：“25px”
}, 500);
});
});
正文{
背景：#333URL（bg.jpg）重复左上角；
字体系列：Arial；
}
ul.sdt_菜单{
边缘顶部：150px；
}
h1.标题{
文本缩进：-9000px；
背景：透明url（title.png）不重复左上角；
宽度：633px；
高度：69px；
}
ul.sdt_菜单{
保证金：0；
填充：0；
列表样式：无；
字体系列：“Myriad Pro”，“投石机MS”，无衬线；
字体大小：14px；
宽度：1020px；
}
ul.sdt_菜单a{
文字装饰：无；
大纲：无；
}
ul.sdt_菜单li{
浮动：左；
宽度：170px；
高度：85px；
位置：相对位置；
光标：指针；
}
ul.sdt_菜单li>a{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：170px；
高度：85px；
z指数：12；
背景：透明url（../images/overlay.png）右下角不重复；
-moz盒阴影：0px 0px 2px#000插图；
-网络工具包盒阴影：0px 0px 2px#000插图；
盒影：0px 0px 2px#000插图；
}
ul.sdt\u菜单li a img{
边界：无；
位置：绝对位置；
宽度：0px；
高度：0px；
底部：0px；
左：85像素；
z指数：100；
-moz盒阴影：0px 0px 4px#000；
-网络工具包盒阴影：0px 0px 4px#000；
盒影：0px 0px 4px#000；
}
ul.sdt_菜单li span.sdt_包装{
位置：绝对位置；
顶部：25px；
左：0px；
宽度：170px；
高度：60px；
z指数：15；
}
ul.sdt_菜单li span.sdt_激活{
位置：绝对位置；
背景：#111；
顶部：85px；
宽度：170px；
高度：0px；
左：0px；
z指数：14；
-moz盒阴影：0px 0px 4px#000插图；
-网络工具包盒阴影：0px 0px 4px#000插图；
盒影：0px 0px 4px#000插图；
}
ul.sdt_菜单li span.sdt_链接，
ul.sdt_菜单li span.sdt_说明，
ul.sdt_菜单li分区sdt_框a{
左边距：15px；
文本转换：大写；
文本阴影：1px 1px 1px#000；
}
ul.sdt_菜单li span.sdt_链接{
颜色：#fff；
字体大小：24px；
浮动：左；
明确：两者皆有；
}
ul.sdt\u菜单li span.sdt\u说明{
颜色：#0B75AF；
浮动：左；
明确：两者皆有；
宽度：155px；
/*给愚蠢的IE7*/
字体大小：10px；
字母间距：1px；
}
ul.sdt\u菜单li div.sdt\u框{
显示：块；
位置：绝对位置；
宽度：170px；
溢出：隐藏；
高度：170px；
顶部：85px；
左：0px；
显示：无；
背景：#000；
}
ul.sdt_菜单li分区sdt_框a{
浮动：左；
明确：两者皆有；
线高：30px；
颜色：#0B75AF；
}
ul.sdt_菜单li div.sdt_方框a：第一个孩子{
边缘顶部：15px；
}
ul.sdt_菜单li div.sdt_框a：悬停{
颜色：#fff；
}
.页脚{
背景颜色：粉红色；
高度：140像素；
宽度：100%；
位置：绝对位置；
底部：0；
溢出：隐藏；
}
.主要内容{
背景颜色：橙色；
浮动：左；
明确：两者皆有；
}
.内容{
背景色：红色；
}

使用jQuery和CSS3向下滑动框菜单














故障模糊预测系统
家
只要快速查看代码片段，我猜您将从正文中提取边距/填充。我没有将代码段移到测试中，但我认为您需要做的就是将footer div设置为0

.footer {
  background-color: pink;
  height: 140px;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  left: 0;
}

.footer {
  background-color: pink;
  height: 140px;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  left: 0;
}