垂直拉伸

我已經在這裏創造一個小提琴一個DIV：http://jsfiddle.net/mupersan82/xAgHg/2/垂直拉伸

HTML：

   <div class="incidentRow"> 
       <div class="incidentCellLeft"> 
        <span class="incidentCellTopLeft incidentId">206 805</span> 
        <span class="incidentCellBottomLeft incidentReferences">15</span> 
       </div> 
       <div class="incidentCellTopRight incidentSubject">Anders Buch Lassen</div> 
       <div class="incidentCellBottomRight incidentDescription "> 
        <span class="multilineEllipseText">Knokler, knokler, knokler! 
         Burde gå i seng. Burde gå i seng. Burde gå i seng. 
        Burde gå i seng.Burde gå i seng.Burde gå i seng. 
        Burde gå i seng.Burde gå i seng.Burde gå i seng.</span></div> 
      </div>

我要上灰色框左側設置在包裝的底部向下延伸到藍色邊框DIV。隨着更多內容添加到右下角的框中，它應該繼續延伸。這怎麼能實現？

來源

2012-11-15 mupersan82

在你的CSS，你嘗試過高度：100％？ – Marc

如果您執行'float：left;'它會阻止對象與其容器的上下文有任何高度。嘗試使用'display：inline-block;'來代替，並確保邊距是合理的。 – PhonicUK

是的，我嘗試了100％，並顯示：內聯塊。 – mupersan82

.incidentCellLeft 
{ 
    max-height:200px; 
    width: 50px; 
    display: block; 
    float:left; 
    text-align: center; 
    background-color: #E6E6E6; 
    vertical-align: bottom; 
    height:100%; 
    position: absolute; 
}

height:100%;和position: absolute;增加。在這裏演示：http://jsfiddle.net/xAgHg/5/

此外，如果您希望將其拉伸至200像素以上的高度，則需要刪除max-height:200px;。

來源

2012-11-15 14:04:40

太好了，非常感謝。 – mupersan82

你不需要改變任何東西的高度。只需設置容器爲灰色，而右邊單元格的背景顏色爲白色的background-color：

demo

來源

2012-11-15 14:09:00 hughes

謝謝，迄今爲止有三種不同的解決方案。哪一個是首選？或者，也許沒有關係？ – mupersan82

回答

相關問題