HTML，CSS如何使元素的宽度始终到页面底部？

Question

我将图像固定在页面的中央，周围是灰色的 div。顶部、左侧和右侧的边距为 15px，但必须全部填充到页面底部。我有图像向您展示我的意思。我的问题是如何使 div 高度全部到底部，取决于屏幕分辨率是多少？想象一下它应该是什么样子:

#IMAGE {
  padding-left: 20px;
  padding-right: 20px;
  /* padding-bottom: 50%; */
  border: 2px solid black;
  border-bottom: 2px solid #D1D1D1;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #D1D1D1;
  bottom: 0px;
}

<div id="body">
  <div class="center" id="IMAGE">
    <h3 id="videoTitle"><?php echo "$title"; ?></h3> 
    <img src="./img/img.png" alt="Image" />
  </div>
</div>

Answer 1

简单，

Demo

body {
    overflow:hidden;
}

#wrapper {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding:15px;
}

#wrapper:after {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:-9999px;
    background:rgba(0,0,0,.2);
}

#wrapper img {
    position:relative;
    z-index:2;
}