Html 100%高度，带转换

我使用了一个技巧，我发现它100%高：

正文{
身高：100%；
}
div{
身高：100%；
宽度：200px；
背景色：rgb（0,0,0）；
位置：绝对位置；
}

---

我假设您希望将黑色DIV居中，而不是实际移动

标记

为此，您需要将

transform

属性从

body

移动并更新到

div

，并进行以下更改：

• 使用

  translateX（）

  而不是

  translate（）

• 添加

  left

  属性以用于

  位置：绝对

当您向左移动元素

时：50%它将其从左边缘移动，因此它不太居中，并且看起来比您希望的更向右。这就是
translateX（-50%）
的用武之地。它将元素向左移动其自身宽度的一半


html，
身体{
身高：100%；
}
div{
位置：绝对位置；
左：50%；
身高：100%；
宽度：200px；
背景色：rgb（0,0,0）；
转化：translateX（-50%）；
}
出于某种原因，您需要专门使用translate吗？如果您只需要将div水平居中，可以尝试以下操作：

body {
  height: 100%;
}

div {
  height: 100%;
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
  border: 1px solid black;
  left: calc(50% - 100px);
}

你很幸运，第一个片段成功了


第一个片段：
body
位于
static
位置
，而
absolute
中的
div
将使用
html
（根元素作为参考）。在此配置中，它可以工作（将绝对值删除到div，它没有高度！）

第二个代码段：
body
+
transform
如果给body
位置：relative
，效果类似
div
将使用它作为参考。但是身体有100%的高度什么都没有


您需要将height:100%设置为HTML，这样body也有一个height，div也可以使用它级联StyleSheet；）


html{height:100%；/*从窗口高度检索*/}
身体{
高度：100%；/*从html检索*/
变换：平移（50%）；/*类似于位置：相对；+最终向左：50%*/
}
div{
高度：100%；/*从车身检索*/
宽度：200px；
背景色：rgb（0,0,0）；
位置：绝对位置；
}
我对编码非常陌生，不知道calc函数。这就是我将要使用的。calc（）确实非常有用，但它在某些浏览器（最著名的是IE）中确实存在一些小问题，您应该记住。我个人从来没有遇到过任何问题，但是一个检查可用性和问题的好地方是我可以使用吗？网站：