我想知道如何放入 100% 高度的 div 吗? 我有一个带有图像的 div 和一个带有内容的 div。
图像宽度为100%,内容相同但未填满整个图像div。
如果你能帮忙,我复制了代码。
谢谢,
#carta div{
position: relative;
display: table;
}
#carta div .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
position: absolute;
top:0;
text-align: center;
color:white;
cursor: pointer;
opacity: 0;
-webkit-transition:all .4s ease-out;
transition:all .4s ease-out;
}
#carta .overlay:hover{
opacity: 1;
width: 100%;
height: 100%;
}
#carta .col-1-4{
padding: 0;
margin:0;
}
#carta div img{
width: 100%;
display: table;
}
#carta .overlay p{
font-style: oblique;
font-size: 20px;
padding-top: 50px;
text-align: center;
border-top: 1px solid white;
-webkit-transition:all .4s ease-out;
transition:all .4s ease-out;
}
#carta .overlay h5{
font-size: 30px;
margin: 50px;
}
<div class="clearFix">
<div class="col-1-4">
<img src="img/carta/atun.jpg" alt="atún revuelto"/>
<div class="overlay">
<h5>Atun revuelto</h5>
<p>15€</p>
</div>
</div>
<div class="col-1-4">
<img src="img/carta/especialidaditaliana.jpg" alt="especialidad italiana"/>
<div class="overlay">
<h5>Especialidad Italiana</h5>
<p>15€</p>
</div>
</div>
</div>
最佳答案
非常感谢您的回复。
我通过在 css 类“.overlay”中添加“display: table-cell”解决了这个问题
这样就占据了div,也就占据了图像。
非常感谢
关于html - div 高度 100% 含内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34074760/