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布局问题：如何实现这种布局？

回答

相关问题