Question

我正在尝试将两个块放入一个固定高度的块中以创建以下布局：

------------------------

UL（初始高度= 0），

在元素添加上增长，直到达到最大高度

滚动应在达到最大高度后添加

------------------------

DIV（初始身高=父母的100％）

减少直到达到最小高度

------------------------

布局的HTML部分：

<div style="height:100px">
  <ul style="max-height:70px;height:auto;overflow:auto"></ul>
  <div style="min-height:30px;height:auto">
    <span>TEST CONTENT</span>
  </div>
</div>

Answer 1

我不确定DIV的属性是否完全清楚。请注意，这不是一个答案（还有），只需要很长时间就可以发表评论。

<div id="container">
  <div id="list">
    <ul></ul>
  </div>
  <div id="content">
    <span>TEST CONTENT</span>
  </div>
</div>

#container {
    height: 100px;
    background: grey;
}
#list {
    max-height: 70px;
    overflow: auto;
    background: #ddf;
}
#content {
    min-height: 30px;
    height: auto;
    background: #fdf;
}

// For testing
setInterval(function(){
    $('ul').append('<li>Test</li>');
},3000);

http://jsfiddle.net/V8yuN/

现在，如果您希望DIV#content首先占据整个高度，但随着DIV#list UL的增长而缩小，那么您尝试使用DIV#content完成的是什么？？请注意，我将UL放在DIV。

中

现在，上面的小提琴演示了你所描述的内容（DIV#content被推到了底部）。我的问题是，height DIV#content在你的设计中是什么问题？

修改

注意，如果您制作#container overflow: hidden并制作#content的{{1}}，则表明height: 100%正在缩小。< / p>
#container

http://jsfiddle.net/V8yuN/2

我不知道，如果#container { height: 100px; background: grey; overflow: hidden; } #list { max-height: 70px; overflow: auto; background: #ddf; } #content { height: 100%; background: #fdf; }的实际内容需要显示（例如，如果它是动态更改的话），那么会导致您的设计中断。

编辑2

除了#content文字的vertical-align之外，以下所有内容均已完成：

<强> HTML

#content

<强> CSS

<div id="container"> <div id="push"> <div id="list"> <ul></ul> </div> <div id="content"> <div class="border-top"></div> <div id="content-inner"> <span>TEST CONTENT</span> </div> </div> </div> <div class="border-bottom"></div> </div>

http://jsfiddle.net/V8yuN/6/

Answer 2

你真的不能用CSS干净利落地做到这一点。我建议使用一些jQuery，你只需在任何给定的时间查询两者的高度，找出哪个更高，然后设置另一个元素匹配

Answer 3

假设你的html看起来像这样：

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

然后你的CSS看起来像这样，设置了#wrap高度，底部有一个最小高度。请注意h eight 100% !important。

#wrap{
    height: 400px;
    background: #ccc;
}
#top{
    //height: 200px; for testing 
    background: #f0f;
}
#bottom{
    height: 100% !important;
    min-height: 200px;
    overflow: scroll;
    background: #000;
}

是你要搜索的那种？

如果您可以发布已经完成的内容，那会有所帮助。

CSS两个元素在一个块内自动高度

3 个答案: