Question

我想将DIV垂直移动-100％的高度。

％值不起作用。
图像的高度设置为100vh。所以我知道我可以做top: -100vh，但我试图理解为什么下面的代码不起作用。
我尝试使用margin-top: -100%，但定位不正确。 This is如何在我的浏览器上呈现它（Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36）。
absolute定位。
虽然（现已删除）的答案使用transform解决了这个问题，但我对实验方法不太感兴趣。 MDN warns about使用transform。

在代码段中，我试图将div2放在后面（或上面，无关紧要）div1。我尝试使用relative和top: -100%，但无效。

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  top: -100%;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>

Answer 1

百分比值相对于容器的大小，即body标记的大小。您可以设置html, body { height: 100%; }以使其正常工作。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}

.div1,
.div2 {
  height: 100%;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  top: -100%;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

或者，使用负边距margin-top: -100vh;。

＆＃13;

body {
  margin: 0;
}

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  margin-top: -100vh;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

或者，使用vh top: -100vh;而不是百分比。

＆＃13;

body {
  margin: 0;
  overflow: hidden; /* hide empty space caused by offset */
}

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  top: -100vh;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

或者，使用transform: translateY(-100vh);。

＆＃13;

body {
  margin: 0;
  overflow: hidden; /* hide empty space caused by offset */
}

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  transform: translateY(-100vh);
  background-image: url("http://lorempixel.com/1280/720/food/");
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

您还可以使用整页宽度和高度将两个div设置为position: absolute;，默认情况下div2具有更高的堆叠顺序，因为它稍后在DOM中呈现，或者使用z-index进行调整。

＆＃13;

.div1,
.div2 {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  background-image: url("http://lorempixel.com/1280/720/food/");
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

Answer 2

margin-top：-100％;似乎有效：

.div1, .div2 {
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.div1 {
    background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
    position: relative;
    margin-top: -100vh;
    background-image: url("http://lorempixel.com/1280/720/food/");
}

<!DOCTYPE html>
<html>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

我不知道为什么不接受

顶部：-100％;

接受

top：-100px;

所以它可以有负值，可能它只是不接受百分比..我在这里被问到：P。

希望我帮了一下。

Answer 3

我尝试使用margin-top: -100%，但未正确定位。

我不知道你说的是，因为它适用于我的情况。

但奇怪的是，为什么这段代码，我的意思是你的原始代码在这里没有用，因为它在liveweave.com上工作得非常好...但是它没有用到其他工具。

更新1

尝试margin-top: -100vh;它可以在每个浏览器和每个视口上完美运行。

虽然margin-top: -100%仅在您的视口全屏时才有效（在我的情况下，如果我更改了视口，它就无法工作）。

Answer 4

在阅读this answer后，我得出结论，我需要设置height和html元素的body。

更新了没有滚动条和填充的代码段。

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  overflow: hidden;
}

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  left: 0;
  top: -100%;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>

垂直移动DIV高度的-100％

4 个答案: