Question

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

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

Answer 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事件时。第二个.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()事件，这会使事情变得复杂。

Answer 2

我扩展了Terry的jQuery答案。我通常不会编写类似这样的代码，但是我继承了WordPress主题，其中#secondary侧边栏动态更改大小，但仅在#main容器> 768px时才更改。不用说，#primary和#secondary向左浮动;-）

    $(window).resize(function(){

        var main = $("#main").width();
        var secondary;

        if (main > 768) {
            secondary = $("#secondary").outerWidth(true);
        } else 
            secondary = 0; // Ignore smaller dimensions where the sidebar is not visible.

        $("#primary").css("width", main - secondary - 1);

    }).resize();

    $(window).trigger('resize'); // When the page first loads

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

2 个答案: