javascript - 如何在窗口加载和调整大小时对 div 使用 innerHeight？

Question

我正在尝试根据它的高度确定 div (.content) 的顶部/底部填充，并根据窗口的加载和调整大小重新计算它。这应该与旁边的另一个 div (.character) 很好地居中对齐。

我试过使用 CSS calc，但在这种情况下，它并没有完全按照我的意愿执行，因为语法不支持运算符，而且我有一些媒体查询会根据字体大小进行更改在取景器上，因此 .content div 的高度有些动态。

下面是 JS 部分，但这里是我到目前为止所做的 JSFiddle:https://jsfiddle.net/inochiishtal/a9z13fb2/62/

$(function(){
    $.w = $(window);
    $.w.on('load resize', res);
    res();
});

function res() {
    $('.content').css('height',($.w.innerHeight()/2)+'px');
}

如有任何帮助或建议，我们将不胜感激。如果有更好的解决方案，我不会 100% 致力于使用 innerHTML。

Answer 1

有点不清楚您希望元素如何对齐，但根据您所说的，您似乎希望 .content 和 .character 彼此垂直居中对齐。

在您的代码段中，您对它们进行了绝对定位。如果那是你想要的方式，你可以忽略它们的边距和一般的 JavaScript，并将这个垂直居中的小技巧应用于两者:

top: 50%;
transform: translateY( -50% );

第一行说“将此元素的顶部放在其定位所基于的元素下方的 50% 处。”因为它经过顶部，所以第二行显示“Scoot me back up 50% of my height”。这就是这些 CSS 属性的工作方式——“top”% 是关于它的父级的，而 translateY % 是关于它自己的。

由于您的两个元素都将在其父元素中垂直居中，因此它们将对齐。

https://jsfiddle.net/qowxezpy/

但是如果您不需要元素像本示例中那样重叠(我认为这看起来不错且现代)，则有一种更简单的方法，即使用 flex。

家长会得到:

display: flex;
align-items: center;

两个 child 得到:

flex-basis: 50%; //just to give them some width, since one is empty