Question

我正试图将两个div放在另一个上面。顶部div应保持始终可见（不滚动）。下面的div包含一个列表，如果列表太长，并且溢出窗口/包含div，则div应该是可滚动的。在定义顶部div的高度时，它很好，但顶部div的内容可能会改变，因此高度不应该固定(like in this question)。

My attempt on Plunker.

没有JavaScript计算，是否可以使用纯CSS？

编辑：

列表应该拉伸到屏幕/容器div的底部。

Answer 1

你需要使用一些不那么明显的CSS技巧来获得你所追求的行为，重要的是任何可滚动的内容都需要在CSS表的单元格中的单独容器中，设置overflow-y和高度100％然后，顶部单元格需要1％的高度才能自动扩展。

然后您需要做的就是根据需要设置表格height和max-height。

通过使用CSS表，在关联元素大小方面的布局计算/操作方面，您可以获得更大的灵活性

Demo Fiddle

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    height:100%;
    width:100%;
    max-height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.row:first-of-type >.cell {
    background:lightgreen;
    height:1%;
}
.row:last-of-type >.cell {
    background:pink;
}
#list {
    height:100%;
    overflow-y:auto;
}

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
    </div>
    <div class='row'>
        <div class='cell'>
            <div id="list">
                <div class="list-element">These are list elements.</div>
                <div class="list-element">If the list is too long</div>
                <div class="list-element">and reaches the bottom</div>
                <div class="list-element">the list should be scrollable.</div>
                <div class="list-element">(And only the list</div>
                <div class="list-element">not together with the <strong>list-head</strong>.)</div>
            </div>
        </div>
    </div>
</div>

Answer 2

这对你有用吗？

<div id="top" >

</div>
<div id="bottom">

</div>

<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>

Answer 3

使用此结构

<div class="main">
   <div class="header">

   </div>

   <div class="content">

   </div>
</div>


.main{
    height:100%;
}

.header{
    height:50px;
    position:fixed;
    top:0;
    background:#454546;
    width:100%;
}

.content{
    margin-top:53px;
    background:#ffffff;
}

Demo

可滚动的div低于非固定高度div

编辑：

3 个答案:

Demo Fiddle