div 设置为 100% 宽度和 100% 高度，但不继承父 div 的大小答案

【问题标题】：Div set to 100% width and 100% height, but not inheriting size of parent divdiv 设置为 100% 宽度和 100% 高度，但不继承父 div 的大小
【发布时间】：2018-01-15 11:30:48
【问题描述】：

我有一个包含 div 的父 div，我想将其设置为与父 div 相同的大小。父 div 设置为 inline-block。我怎样才能做到这一点？ https://jsfiddle.net/7twc7jy0/

<div class= "parent">
   <div class="caption">
      <h4>Thumbnail Headline</h4>
      <p>short thumbnail description</p>
   </div>
   <img class="project-img" src="https://i.imgur.com/UnxgcnT.png" >
</div>

css:

.project-img{
  width:400px;
  height: auto;
}

.parent{
  display:inline-block;
}

.caption {
    position:absolute;
    background:rgba(66, 139, 202, 0.75);
    height:100%;
    width:100%;
    padding:0%;
    margin:0%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

JS：

$('.parent').hover(
    function(){
        $(this).find('.caption').fadeIn(150)
    },
    function(){
        $(this).find('.caption').fadeOut(150); //.fadeOut(205)
    }
);

【问题讨论】：

标签： jquery html css width

【解决方案1】：

你应该像这样设置父级：

.parent {
    padding:0%
}

【讨论】：

【解决方案2】：

您必须在父 div 上添加相对位置

.proj{
  display:inline-block;
  position:relative;
}

这应该做的工作

【讨论】：