html佈局問題：如何實現這種佈局？

我有三欄佈局。在第三欄中，我有兩個div。第一個div是固定的。第二個div的最小高度爲50px。當第二個div內的文本內容增加時，它的高度應該增加到它到達第三列底部的位置，然後它應該顯示滾動條。html佈局問題：如何實現這種佈局？

到目前爲止，我已經申請我的努力在這裏：http://jsfiddle.net/Q2Ata/1/

我試圖實現這種佈局，但在我裏面添加更多的文本，然後在主表的高度也inceases。這個問題可以在這個小提琴中找到。 http://jsfiddle.net/Q2Ata/2/

HTML代碼：

<div class="table"> 
    <div class="table-cell"> 
     <div class="column">Column 1</div> 
    </div> 
    <div class="table-cell"> 
     <div class="column">Column 2</div> 
    </div> 
    <div class="table-cell"> 
     <div class="column"> 
      <div class="container"> 
       <div class="header"> 
        <div class="table-cell">Header</div> 
       </div> 
       <div class="content"> 
        <div class="abc"> 
         text content here ... 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS代碼：

.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed} 
.table-cell{display:table-cell;padding:10px;vertical-align:top} 
.column{border:1px solid #000;height:100%} 
.container{display:table;width:100%} 
.header, .content{display:table-row} 
{display:table-row} 
.container .table-cell{border:1px solid #F00} 
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto}

來源

2014-07-10 Ashwin

嘗試使用'overflow：auto'？ – qtgye

是的，我也嘗試過。這是表格佈局問題。 – Ashwin

我不明白你爲什麼要創建表結構（'display：table;'和其他'table-'顯示）而不是使用表本身？另外：如果該佈局將與恆定數量的列一起使用，則可以爲每列使用百分比寬度的「塊」和「內嵌塊」顯示。 – Silveraven

你需要設置你的元素在max-height爲了有overflow: auto工作，你將有滾動條達到最大高度時。

http://jsfiddle.net/Q2Ata/4/

來源

2014-07-10 10:04:57

真的非常感謝您的快速回復。我的頁面將以各種屏幕分辨率顯示，我不想編寫JavaScript來計算最大高度。我也不能使用媒體查詢，因爲在這種情況下，垂直窗口調整大小將不會有平滑的效果。 – Ashwin

'max-height'是一個CSS屬性，與JavaScript無關。這個解決方案的工作原理，它不需要媒體查詢，所以我不明白反對意見。 –

我知道'max-height'是一個css屬性。但是，我怎麼知道我應該在各種屏幕尺寸上應用最大高度值？我不需要JavaScript嗎？ – Ashwin

html佈局問題：如何實現這種佈局？

回答

相關問題