javascript - 使用 Javascript 或 JQuery 设置等于窗口一半的 div 宽度，负 25px

Question

我想从宽度设置为窗口宽度一半<的两个div中减去25px或任意数量的px/strong>

这里是 https://jsfiddle.net/vzwa2fjL/8/

这是我到目前为止对 JS 的了解

$(window).resize(setHeightAndWidth);
$(document).ready(setHeightAndWidth);

function setHeightAndWidth() {
    var halfWidth = $('.left, .right').width($(window).width() / 2);

    $('.section').height($(window).height());
    halfWidth;
}

我只需要做 halfWidth - 25px; 但我不确定怎么做。

Answer 1

使用 CSS calc具有相对视口(viewport)宽度。

Fiddle Demo

.left, .right {
    ....
    width: calc(50vw - 25px);
}

Browser Compatibility

---

由于 calc 在移动浏览器中使用不可靠，因此可以使用 jQuery。

Updated Fiddle

$('.left, .right').width($(window).width() / 2 - 25);

此外，

$('.section').height($(window).height());

如果可以在 CSS 中完成，则不需要。

.section {
    height: 100vh;
}