Question

我有一个DIV，它覆盖了YouTube视频iframe。

我尝试做的是从顶部减少叠加DIV (.the-box)的高度。

例如，像这样。

我知道我可以从底部设置高度但不是，我试图做的是从上到下降低高度。

我想说我希望从300px缩小叠加DIV的大小（意味着YouTube视频将从上到下清晰可见300px。）

__________________________
|         |               |
|         |               |
|         | 300px visible |
|         |               |
|        \/               |                    
|                         |
|  rest is still covered  |
|________________________ |

它可以是任何数量，300px，200px，50px。我将从数据库中将数量插入CSS源。

.the-box { 
    reduce-from-top: <?php echo $size ?>px; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 999; 
    background-color: white; 
    opacity: 0.5; 
}

Answer 1

在父级上设置overflow:hidden并使用top位置值似乎就是您所需要的。

.the-click {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100px;
  /* this is the arbitrary value */
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: red;
  opacity: 0.5;
}

.the-click:hover {
  background-color:#bada55; 
  }
.container {
  position: relative;
  overflow: hidden;
  /* stops the overlay from expanding beyond the container */
}
iframe {
  display: block;
}

<div align="center" class="container">
  <a href="http://thelink" class="the-click"></a>

  <iframe wmode="Opaque" class="video-iframe" width="100%" height="315" src="//www.youtube.com/embed/ZauRZNs8BMg" frameborder="0" allowfullscreen=""></iframe>
</div>

Answer 2

我自己想出了答案。

只需将高度设置为auto并将top设置为您想要缩小的尺寸。

.the-click { 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  bottom: 0; 
  top: 100px; 
  width: 100%; 
  height: auto; 
  z-index: 999; 
  background-color: white; 
  opacity: 0.5;
 }

http://jsfiddle.net/Ym5w8/46/

希望这有助于其他人。：）

Answer 3

使用https://msdn.microsoft.com/en-us/library/system.threading.threadpool.setmaxthreads(v=vs.110).aspx！在容器上，设置display: flex和align-items: flex-end，然后像往常一样在内部div上设置CSS。 flex-end值使其粘贴在容器的底部。

＆＃13;

div.outer {
  align-items: flex-end;
  background-color: red;
  display: flex;
  height: 100px;
  width: 100px;
  padding: 10px;
}

div.inner {
  background-color: pink;
  height: 50%;
  width: 100%;
}

＆＃13;

<div class="outer">
  <div class="inner"></div>
</div>

＆＃13;

从顶部降低DIV的高度

3 个答案: