没有使用像素值的正确尺寸大小

Question

我的情况如下。我有一个有两个孩子div的div。我想'事件'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

我不认为我完全理解你的困惑，然而，唯一的区别是我可以在你期望的结果和你目前的工作之间侦测边界的存在 - 在#scheduler .event上切换overflow:hidden;到overflow:visible;产生的东西在视觉上看起来像我达到了预期的效果。

Answer 2

试试这个。与.bar依然代码到位：取出bar格，然后.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/

编辑

#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/