代码之家 › 专栏 › 技术社区 › Kognise

相对于视口边界的CSS div大小?

positioning css-position css javascript

1

Kognise · 技术社区 · 8 年前

我有一个div,里面有一些文字和一个YouTube视频。我用CSS给它一个灰色的背景。我还将位置从顶部设置为4.4 em,从左侧设置为1%,并使其宽度为98%。我希望div的底部距离底部4.4em,无论浏览器的大小或缩放。我该怎么做?我可以使用CSS吗?还是需要Javascript?如果您给出的答案包含Javascript代码,请不要使用jQuery。

div {
  position: absolute;
  left: 1%;
  width: 98%;
  top: 4.4em;
  background: grey;
}

body {
  width: 100%;
  color: white;
}

EDIT: Here is my HTML:

<div>
  <h1>A Heading</h1>
  YOUTUBE VIDEO HERE
</div>

1 回复 | 直到 8 年前

1

3

user7838243 user7838243 8 年前

您可以使用透明的边框来模拟底部的4.4em间隙,也可以使用“calc()”css函数 https://www.w3schools.com/cssref/func_calc.asp

例子:

height: calc(100vh - 4.4em);