将span元素的高度设置为100％

Question

我目前正在为一件软件构建一个主题/风格。

目前，代码如下：

http://jsfiddle.net/afseW/1/

相关代码是：

body div[type*=privmsg] .sender {
    font-weight: 700;
    width:134px;
    text-shadow: #fff 0px 1px; 
    background-color: #eee;
    min-height:22px;
    border-right: 1px solid #dcdcdc;
    padding-right:5px;
    text-align:right;
    display:inline-block;
    overflow: auto;
}

请注意，在小提琴中，由于某种原因，文本会折叠到第二行，而在客户端中，图像看起来像这样：

当然，跨度不是一个块，因此我赋予它以下属性：display: inline-block;

但是如何获得继承父p块的高度？

Answer 1

我改变了DOM结构。请参阅内联样式。在第一个div（。message）中，我更喜欢添加.clearfix类的更好解决方案，请参阅this。

<div class="message" type="privmsg" style="overflow: auto;">
  <div class="sender-cont" style="width: 30%; float: left;">
    <span class="sender" ondblclick="Textual.nicknameDoubleClicked()"   oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
  </div>

  <div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
  </div>
</div>

希望这有帮助！

Answer 2

由于跨度是一个设定的宽度，这里最简单的做法就是让跨度具有绝对位置。

body div[type*=privmsg] .sender,
body div[type*=action] .sender {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    ...
}

然后将填充添加到父元素：

body span.message {
    position: relative;
    padding-left: 140px;
    ...
}

http://jsfiddle.net/afseW/3/

PS ：请在下次jsfiddle中提供一个精简版本，这里的html和css非常史诗。