Javascript 如何使DIV展开以适合放置在绝对位置的一个图元和放置在固定位置的另一个图元之间

我的页面顶部有一个UL/LI，LIs定位为“相对”，包含菜单按钮

底部的另一个div定位为“fixed”，包含帮助、版权、使用条款等链接

我想在两者之间拉伸一个div，以适应这两个div，这样它就可以随浏览器窗口调整大小

CSS:

HTML:

就业申请
身体{
背景：#333URL（images/bg.jpg）重复左上角；
字体系列：Arial；
}
span.reference{
位置：固定；
左：10px；
底部：10px；
字体大小：12px；
}
参考文献a{
颜色：#aaa；
文本转换：大写；
文字装饰：无；
文本阴影：1px 1px 1px#000；
右边距：30px；
}
参考a：悬停{
颜色：#ff2222；
}
ul.sdt_菜单{
边缘顶部：80px；
}
h1.标题{
文本缩进：-9000px；
背景：透明url（images/title.png）右上角无重复；
宽度：633px；
高度：69px；
}
$（函数（）{
/**
*对于鼠标指针上的每个菜单元素，
*我们放大图像，同时显示sdt_活动范围和
*sdt_包装跨度。如果元素有子菜单（sdt_框），
*然后我们滑动它-如果元素是菜单中的最后一个元素
*我们向左滑动，否则向右滑动
*/
$（'sdt_menu>li'）.bind（'mouseenter'，function（）{
变量$elem=$（本）；
$elem.find（'img'））
.停止（正确）
.制作动画({
“宽度”：“170px”，
“高度”：“170px”，
“左”：“0px”
}，400，'easeOutBack'）
.andSelf（）
.find（“.sdt_wrap”）
.停止（正确）
.animate（{'top'：'140px'}，500，'easeOutBack'）
.andSelf（）
.find（“.sdt_活动”）
.停止（正确）
.animate（{'height'：'170px'}，300，function（）{
var$sub_menu=$elem.find（'.sdt_框'）；
如果（$sub_menu.length）{
左变量='170px'；
如果（$elem.parent（）.children（）.length==$elem.index（）+1）
左='-170px'；
$sub_menu.show（）.animate（{'left'：left}，300）；
}   
});
}).bind（'mouseleave'，function（）{
变量$elem=$（本）；
var$sub_menu=$elem.find（'.sdt_框'）；
如果（$sub_menu.length）
$sub_menu.hide（）.css（'left'，'0px'）；
$elem.find（“.sdt\u活动”）
.停止（正确）
.animate（{'height'：'0px'}，300）
.andSelf（）.find（'img'））
.停止（正确）
.制作动画({
“宽度”：“0px”，
“高度”：“0px”，
'左'：'85px'}，400）
.andSelf（）
.find（“.sdt_wrap”）
.停止（正确）
.animate（{'top'：'25px'}，500）；
});
});
就业申请
















alskd fjlaksdj flaksdj flaksdj flkasdj flaksdj lkasjdflkajsdlfk jalskdfj

alskd fjlaksdj flaksdj flaksdj flkasdj flaksdj lkasjdflkajsdlfk jalskdfj

这能做到吗

CSS解决方案或javascript窗口大小调整事件都可以，只要可以

编辑：以下是当前结果的图片：

---

编辑：这是对我在这里找到的一个优秀代码段的修改，请确保正文不可滚动

body {
    overflow: hidden;
}

您的页脚是：

bottom: 0px;

让你的内容成为div

bottom: 20px; // or whatever is perfect
overflow: auto;

页脚是固定的，因为正文是不可滚动的，而内容是可滚动的，所以位置应该总是正确的

您可以改为使用边距使身体可滚动：

margin-bottom: 20px;

和您的页脚：

position: fixed;
bottom: 0px;

---

因此，body div滚动，页脚是静态的。

如果您想使用JQuery路径，那么这个示例如何获得

.sdt_菜单的偏移底部以及
.reference
的偏移顶部，并只使
.content
的高度与
margin-bottom: 20px;

position: fixed;
bottom: 0px;

$(window).on("resize", function() {

    var top = $('.sdt_menu').offset().top + $('.sdt_menu').outerHeight(true);
    var bottom = $(".reference").offset().top - 23;   
    var content_height = (bottom-top);

    $(".content:nth-child(2)").css("height", content_height); //I use nth-child(2) because you have multiple elements with class `.content`

}).resize() //so it resizes on load