如何相对于屏幕尺寸设置元素的高度

Question

我想将元素的height设置为全屏模式尺寸的百分比，以便当浏览器窗口较小时，高度不变。

Answer 1

%运算符是动态的，它根据屏幕的宽度或高度而变化因此，如果您希望长度不变，可以使用px或pt甚至rem（但这取决于根元素的大小）

Answer 2

您可以在height中指定vh，它等于视口（不是屏幕的）初始包含块的高度的1％。

如果您实际上需要vh相对于屏幕高度，则必须使用JavaScript的height对象：

screen

您可以直接在screen属性中使用这些值：

window.screen.height;
window.screen.width;

style

// 10% of the screen height:
document.getElementById('container')
  .style.height = `${ window.screen.height * 0.1 }px`;

或使用

#container {
  width: 100%;
  border-bottom: 3px solid black;
  
  /* Fallback value (relative to viewport, not screen) */
  height: 10vh;
}

和<div id="container"></div>创建更可重用的东西：

calc()

calc()

CSS custom properties