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

Question

我将图像固定在页面中央，灰色div围绕它。顶部，左侧和右侧的边距为15px，但必须填满页面底部。我有图像向你展示我的意思。我的问题是如何使div高度全部到底，取决于屏幕分辨率是多少？想象一下它的外观：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}

Answer 2

我认为您将需要使用JavaScript。您可以获取整个页面的高度，以及您希望div开始的位置的高度。它将会是这样的。

$('#yourDiv').height($(window).height() - $('#top').height());

我认为这就是你所要求的。