100% 高度转换

Question

我使用了一个我发现的技巧使其达到 100% 高度：

body {
  height: 100%;
}

div {
  height: 100%;
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
}

<!DOCTYPE html>
<html>
  <body>
    <div></div>
  </body>
</html>

在这里，我添加了一个转换：translate(50%);因为我想把它居中。但是，这使得 height: 100%;不工作了。有没有办法两者兼得？

body {
  height: 100%;
  transform: translate(50%);
}

div {
  height: 100%;
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
}

<!DOCTYPE html>
<html>
  <body>
    <div></div>
  </body>
</html>

Answer 1

我假设您想将黑色居中 DIV 而不是实际移动 <body> 标签。

为此，您需要将 transform 属性从 body 移动和更新到 div，并进行以下更改：

使用 translateX() 而不是 translate()。
添加 left 属性以与 position: absolute; 一起使用。

当您移动一个元素时 left: 50%; 它会从它的左边缘移动它，所以它不是很居中并且看起来比您想要的更靠右。这就是 translateX( -50% ) 的用武之地。它将元素向左移动其自身宽度的一半。

html,
body {
  height: 100%;
}

div {
  position: absolute;
  left: 50%;
  height: 100%;
  width: 200px;
  background-color: rgb( 0, 0, 0 );
  transform: translateX( -50% );
}

<div></div>

使用翻译的一个好处是，如果您没有为 DIV 设置特定的宽度，它仍然会居中。

html,
body {
  height: 100%;
}

div {
  position: absolute;
  left: 50%;
  height: 100%;
  color: white;
  background-color: rgb( 0, 0, 0);
  transform: translateX( -50%);
}

<div>
  <p>
    Some simple text goes right here.
  </p>
</div>

Answer 2

您是否出于某种原因需要专门使用翻译？如果你只需要水平居中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);
}

Answer 3

您很幸运，第一个代码段有效。

第一个片段：body 在 static position 和 div 在 absolute 将使用 html（根元素作为参考）。在此配置中它可以工作（将绝对值删除为 div 并且它没有高度！）
second snippet : body + transform 如果你给 body position:relative 是类似的效果。 div 将作为参考。但是 body 有 height:100% of ... nothing !

你需要将 height:100% 设置为 HTML ，所以 body 也有一个高度 div 也可以使用它 Cascaded S样式 S版面 ;)

html {height:100%;/* retrieved from window's height */}
body {
  height: 100%;/* retrieved from html */
  transform: translate(50%);/* similr to position:relative; + eventually left:50%; */
}

div {
  height: 100%;/* retrieved from body */
  width: 200px;
  background-color: rgb(0,0,0);
  position: absolute;
}

<!DOCTYPE html>
<html>
  <body>
    <div></div>
  </body>
</html>

现在是不是站在中间，不确定:)，但是div恢复了屏幕高度

100% 高度转换

100% Height With Transforming

html

css

height

css-transforms