沒有使用像素值的正確尺寸大小

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/