div位于底部中心而不滚动

Question

我想创建一个静态页面，其中包含一个没有任何内容的 YouTube 视频。我需要将视频 div 放在页面的中心底部，无需滚动，也无需提及高度和宽度{因为我正在使用响应式 CSS}。我尝试了以下代码

html:

<div class="video-content">
  <div class="video-container"><iframe width="420" height="315" src="//www.youtube.com/embed/fMJ21v7mX7U" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

CSS：

.video-content
{
    width:45%;
    margin-left:auto;
    margin-right:auto;
}
.video-container {
    height:315px;
    background: #666;
    position: fixed;
    bottom:40px;
    width: 45%;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

提前致谢。

Answer 1

将

.video-container

宽度设置为

100%

。现在将视频底部中心对齐，删除

position:absolute

为

.video-container iframe

，并添加以下 CSS：

.video-container iframe {
  display: block;
  margin: 0 auto;
}

要将视频设置为页面底部，请将

bottom:0

设置为

.video-container

Answer 2

您可以将

!important

与

video-container

的高度和宽度一起使用，将您的高度和宽度覆盖为 iframe 的高度和宽度。

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important; 
}