在不使用像素值的情况下正确调整div大小

Question

我的情况如下。我有一个有两个孩子div的div。我希望'event'div为300px的宽度和高度。第一个要求是在'content'和'bar'元素使用父级宽度的100％时保持'event'div的大小。其次，就目前而言，'content'元素的边界是不可见的。是否可以在不使用硬编码值的情况下将所有内容都装入其中并在大多数现代浏览器（FF，Chrome，Opera，IE7 +）中正确显示？

这是我想要实现的（注意左边的红色条，其高度为100％并且不会与事件元素周围的灰色边框碰撞）：

这就是我所拥有的。 Html：

<div id="wrapper">
    <div id="scheduler">
        <div class="event" style="top: 30px; height: 300px; width: 300px">
            <div class="bar"></div>
            <div class="content">
                <div class="inner-content">Some text</div>
            </div>
        </div>
    </div>
</div>

，css：

#wrapper {
    width: 600px;
    height: 600px;
}
#scheduler {
    background-color: #E1FFFE;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0 10px;
    position: relative;
}
#scheduler .event {
    display: block;
    float: left;
    position: relative;
    width:100%;
    overflow:hidden;
}
#scheduler .event .bar {
    background-color: red;
    display: inline;
    float: left;
    height: 100%;
    position: relative;
    width: 5px;
}
#scheduler .event .content {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-left: none;
    display: inline;
    float: left;
    height: 100%;
    position: absolute;
    width: 100%;
}

和一个可运行的演示：

http://jsfiddle.net/6nTvD/1/

Answer 1

试试这个。取出bar div，然后将.content css更改为：

#scheduler .event .content {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-left: 5px solid red; // replaces the bar
    display: inline;
    float: left;
    height: 99%; // a bit of a hack to fit the border in
    position: relative;
    width: 98%; // hack
}

http://jsfiddle.net/Dp3yz/

编辑：代码.bar仍然存在：

#scheduler .event .bar {
    background-color: red;
    display: inline;
    float: left;
    height: 99.9%; /* Small offset at bottom */
    position: relative;
    width: 5px;
}
#scheduler .event .content {
    background-color: white;

    /* revised border */
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;

    display: inline;
    float: left;
    height: 99%;
    position: absolute;
    width: 98%;
}

新版本： http://jsfiddle.net/JJrC9/1/

Answer 2

我不认为我完全理解你的窘境，但是，唯一的区别是我可以在你期望的结果和当前的工作之间进行间谍 - 切换{{1在overflow:hidden;到#scheduler .event上生成的东西在视觉上看起来就像是达到了预期的效果。