使包含 img 的 div 占据全高答案

【问题标题】：Make a div containing img take full height使包含 img 的 div 占据全高
【发布时间】：2014-08-28 17:27:09
【问题描述】：

这个问题在网上被问了很多。但每次尝试都不成功

对于我需要制作标题的网站，我使用的是 django + 样板文件（我认为这应该是样板文件的原因，因为在 js fiddle 中复制粘贴我的代码有效，而它不在本地）。

这是我使用的 HTML：

<div id="topbar">
    <div id="networking">
        <div id="title">
            EasyMusik
        </div>
        <div id="logo">
            <img src="{% static "img/icons/myzik.svg" %}" />
        </div>
    </div>
</div>

这是 CSS：

#topbar{
    display:block;
    background-color : #29A329;
    position: relative;
    float: top;
}
#tobbar div{
    height: 100%;
    display:inline-block;
}
#networking{
    padding-left:25%;
}
#networking div{
    display:inline-block;
}
#title{
    position: relative;
    height:100%;
    font-size: 24px;
}
#logo img{
    width:100%;
    display:block;
    float:left;
}
#logo{
    position: relative;
    height: 100%;
    padding-left:15px;
    background-color : #FF0000;
}

我得到了这个result

我希望红色区域填满绿色区域。我应该添加/删除哪个属性来实现这一点？

编辑：终于设法得到一个小提琴： Fiddle here

【问题讨论】：

完全填充为 in.. 透明？
整件事都是一张图片，你不能只用 CSS 擦除音符的红色背景——如果这就是你想要的。
@davidxd33 我不想删除那个背景，如果你看看我的 Css，你应该会看到我放置了这个背景。我希望这个背景从绿色条的顶部开始，到绿色条的底部结束。
你需要给图片设置一个宽度
@SyedAliTaqi 没问题，贴吧，我会用它来适配我自己的Css！

标签： html css html5boilerplate

【解决方案1】：

这对我有用。虽然它不是你的 CSS。

CSS：

.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}

HTML：

<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>

【讨论】：

【解决方案2】：

给#topbar 一个高度。如果您希望您的子容器具有 100% 的高度或宽度，则您的父容器必须指定一个高度或宽度。祝你好运！

    #topbar{
        display:block;
        background-color : #29A329;
        position: relative;
        float: top;
        height: 200px
    }

【讨论】：