Div高度不适合父母

Question

仍在开发我的html5 / css3移动网站，我无法将div的高度调整为其父级。

http://jsfiddle.net/1eg2cwLs/

小提琴并不完全像这样，因为我使用的是webfonts（虽然因为我不打算在目标系统上进行互联网连接，但仍然可以离线保存）。但问题仍然存在。

你可能会从现场看到问题是什么，如果不是：我希望绿色和红色条（.itemclass）的大小与其父级的内容相同（{{1} }）。

根据字体，字体大小（仍然在玩它）和每个项目的整体高度，我必须精确调整负边距。否则它在截图中看起来像。我刚刚提到的负边距是在CSS级.item中:(在小提琴中也标有箭头）......

.itemclass

这不是解决方案。我尝试了很多东西，但我只是按照我提到的方式“工作”。

更好的想法是如何让它看起来干净而没有黑客攻击？

同样，关于我的html / css的其他改进提示也很受欢迎。

很抱歉将整个代码附加到小提琴中。如果我要删除它，我不知道它是否具有代表性。

祝你好运

Answer 1

我可能会走这条路：

.item {
    position: relative;
    ...
}
.itemclass {
    position: absolute;
    top: 0;
    bottom: 0;
    ...
}
.itemcontent {
    margin-left: 50px;
    ...
}

Demo

Really big font demo

考虑身体的合理最小宽度以防止.tagline重叠等。

Answer 2

您可以将.item的margin-top设置为0，然后调整.vcenter：margin的top-top。这样你只是调整文本而不是div。

或者你可以完全放弃.itemclass的静态高度和宽度。现在.itemclass将扩展。 http://jsfiddle.net/1eg2cwLs/5/

.item {
    width: 100%;
    height: auto;
    background-color: #eeeeee;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
}
.itemclass {
    height: 100%;
    width: auto;
    background-color: #27ae60;
    vertical-align: middle;
    text-align: center;
    color: white;
    font-size: 2em;
    margin-top: 0;
    display: inline-block;
}

作为后备，您可以将.item设置为不显示溢出，然后调整行高：

 .item {overflow:hidden}

Answer 3

在这种情况下，

overflow: hidden;是你最好的朋友！它隐藏了.item

之外的任何溢出内容

将其添加到.item {}声明中。

http://jsfiddle.net/1eg2cwLs/1/