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

【问题标题】：jQuery - calculate element width through subtract pixel from window sizejQuery - 通过从窗口大小中减去像素来计算元素宽度
【发布时间】：2013-11-02 21:46:36
【问题描述】：

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

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

【问题讨论】：

你能不能把jsfiddle.net 放在一起，展示你想要做什么。从你的描述中看不出来。
当然，这里是：jsfiddle.net/w555h/1 简单来说，我会从窗口宽度中减去元素A的宽度，得到元素B的宽度。
Fiddle 的最后一行有一个红点。如果你删除它，它会修复你的脚本（有点）。
感谢您的支持！这是一个新的小提琴：jsfiddle.net/D2LDF

标签： jquery window subtraction

【解决方案1】：

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

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

在此处查看小提琴：http://jsfiddle.net/teddyrised/2Fhue/

更新 1： OP 提供了他自己的小提琴，所以这里是应用了修复的那个：http://jsfiddle.net/teddyrised/w555h/2/。我还冒昧地删除了height: 100% 并改用bottom: 0，这证明了与使用位置坐标强制拉伸元素尺寸相同的概念:)

更新 2： OP 请求了一个基于 jQuery 的解决方案（为什么不知道为什么，但无论如何......），它是这样工作的——我们在一个匿名函数中执行宽度计算当在$(window) 对象上触发调整大小事件时。第二个 .resize() 事件被链接起来，以便在 DOM 准备好时触发。

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

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

评论：我通常会尽量避免将 jQuery（或 JS）用于此类目的，因为 CSS 可以很容易地使用。那是因为通过计算视口的宽度，您还必须监听窗口的.resize() 事件，这会使事情变得复杂。

【讨论】：

我真的需要通过 jQuery 获取宽度，因为我将用于计算我的图片库。
@user2825956 不客气。如果对你有帮助，记得采纳答案:)
现在有下一个问题需要解决。每个图像应具有 16:9 的纵横比。因此，我必须将
的宽度除以 16 并将该值乘以 9。看起来并不难，但实际上我被卡住了。

@user2825956 这超出了这个问题的原始范围 - 您应该为此创建一个新问题。

好的，我会的！非常感谢！