Question

我在页面上定义了这个CSS：

.content {
    background-image: url("img/bg.jpg");
    width: 100%;
}

.exhibit {
    width: 100%;
    height: 100%;
    text-align: center;
}

.yt-embed {
    width: 560px;
    height: 315px;
    position: relative;
    top: 50%;
}

带有.yt-embed的DIV在.exhibit中，带有.exhibit的DIV在.content中。

我的问题是＆＃34; top＆＃34;我的.yt-embed类中的属性完全没有效果。但是，当设置为像素值而不是百分比时 。

Answer 1

百分比值相对于父母。

因此，对于给定元素的任何维度，如果要使用百分比值，则渲染引擎必须已知道元素父元素的相应维度的显式值

一个例外是<html>元素，可以接受百分比值，因为呈现引擎会将该值视为 relative-to -viewport 而不是亲戚。

因此，启用

.yt-embed {
    top: 50%;
}

申报工作，您需要申报：

html, body, div {
    height: 100%;
}

在CSS的开头。

Answer 2

我的问题是＆＃34; top＆＃34;我的.yt-embed类中的属性完全没有效果。

您的问题是您的外部元素没有特定的高度。它们由具有高度声明的内部元素.yt-embed展开。

使用基于百分比的值被广泛使用并且工作正常。这是一个简单的例子：

＆＃13;

* {
  box-sizing: border-box;
}
.wrapper {
  display: inline-block;
  width: 300px;
  height: 300px;
  position: relative;
  background: #f00;
  padding: 10px;
}
.full.sized {
  width: 100%;
  height: 100%;
  background: #0f0;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #00f;
  color: #fff;
  padding: 10px;
}

＆＃13;

<div class="wrapper">

  <div class="full sized">

    <div class="inner">inner</div>

  </div>

</div>

＆＃13;

Answer 3

您可以通过将位置更改为绝对值

来使用百分比

.yt-embed {
    width: 560px;
    height: 315px;
    position: absolute;
    top: 50%;
}

Answer 4

父元素（在本例中为.exhibit）需要在height属性上有一个像素值，以便浏览器可以确定其位置的确切位置。

您可以在此处阅读top：http://www.w3schools.com/cssref/pr_pos_top.asp

将百分比值应用于另一个元素中元素的高度时也是如此;如果孩子有百分比值，那么父母必须有一个像素值才能产生任何效果。

修改

示例：

.exhibit { height: 315px; *or* min-height: 315px; }

或在.exhibit内创建另一个div，其中包含.yt-embed，如果需要，可以使用这些值。

.yt-embed { top: 50%; position: absolute/relative; width: 560px; }

＆＃34;顶部＆＃34;使用百分比时，CSS属性无效

4 个答案: