全宽幻灯片显示，准确获取视口尺寸的问题

Question

我正在创建一个简单的图像/内容幻灯片。幻灯片放映需要固定位置或绝对位置，位于其下方的内容相对较多（因此内容将覆盖滚动时的幻灯片放映）。没有内容，我的工作得相当好。但是当我添加内容时，我遇到了两个问题：

1. 我无法用JS

设置上边距

2. 在浏览器调整大小时，视口的高度计算不正确，导致生成的维度大于实际视口的维度。这会导致幻灯片显示更高......更高，当我希望它比视口短200px时。

以下是我用来获取尺寸的内容：

// The amount of content to preview below the slideshow, above the fold
previewContent = 100;
slideCount = $('#slides li').length;
slideWidth = $(window).width();
slideHeight = $(window).height() - previewContent;
slideWindowUlWidth = slideCount * slideWidth;

...并设置它们：

// Set the width & height of each slide
$('#slides li, #slideWindow').css({width: slideWidth, height: slideHeight });

// Set the width of the slide container (<ul>)
$('#slides').css({ width: slideWindowUlWidth, marginLeft: - slideWidth });

我已经创建了一个带有完整实现的JSFiddle，内容已被注释掉： http://jsfiddle.net/Wg5V8/5/

任何帮助都会很棒。我确定这很简单......我只是被卡住了。