jQuery - 通过从窗口大小中减去像素来计算元素宽度

Question

我的目标是通过从窗口大小中减去 200px 来计算固定定位元素的宽度(顶部:0；左侧:200px；)，以便它适合视口(viewport)的其余部分。因此我使用了以下代码，但遗憾的是它不起作用。希望你们中的一些人可以帮助我!

$(function() {
    width = ($(window).width() - 100);
    $("div").css("width", width);
})​;

Answer 1

实际上，您不需要依赖 jQuery。有一个简单的 CSS 技巧可以通过在该元素上声明 right: 0 来完成此操作。它自然地迫使它一直延伸到视口(viewport)的右边界。

div {
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
}

请参阅此处的 fiddle :http://jsfiddle.net/teddyrised/2Fhue/

更新 1: OP 提供了他自己的 fiddle ，因此这是应用了修复程序的 fiddle :http://jsfiddle.net/teddyrised/w555h/2/ 。我还冒昧地删除了 height: 100% 并使用 bottom: 0 代替，这演示了与使用位置坐标强制拉伸(stretch)元素尺寸相同的概念:)

更新 2: OP 请求了一个基于 jQuery 的解决方案(为什么我不明白，但无论如何......)，它是如何工作的 - 我们在触发的匿名函数中执行宽度计算当在 $(window) 对象上触发 resize 事件时。第二个 .resize() 事件被链接起来，以便在 DOM 准备就绪时触发。

$(function() {
    $(window).resize(function() {
        var width = $(this).width() - 200;
        $("#content").css("width", width);
    }).resize();
});

http://jsfiddle.net/teddyrised/w555h/4/

评论:当 CSS 可以轻松使用时，我通常会尽量避免将 jQuery(或 JS)用于此类目的。这是因为通过计算视口(viewport)的宽度，您还必须监听窗口的 .resize() 事件，这使事情变得复杂。