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

Question

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

csshtml

3

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

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

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>

- dragoon

1

你能否发布一下你尝试过的内容（可能包括一个 http://jsfiddle.net 的演示链接）？ - Jared Farrish

只是为了澄清：ul和div是同一个固定高度块的子元素，它们不是彼此的子元素，并且ul的最大高度+div的最小高度=父元素的固定高度？ - approxiblue

我是说，标记和css，不是css的更多描述。展示给我们你正在做什么。 - Jared Farrish

3个回答

2

仅使用CSS无法干净地完成此操作。我建议您使用一些jQuery，在任何给定时间查询两者的高度，找出哪个更高，然后将另一个元素设置为匹配高度。

- DA.

更简单的方法是，我可以通过减去顶部元素的高度来重新计算底部元素的高度。 - dragoon

0

假设您的HTML如下所示：

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

那么你的CSS可能看起来像这样，设置#wrap高度，并为底部设置最小高度。注意height 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;
}

这是你正在寻找的吗？

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

- Dennis Hunink

我认为这仅在手动设置顶部元素的高度时才有效，但我会动态地向我的“ul”添加元素。当然，我可以使用JavaScript，但是我正在尝试找到一个纯CSS的解决方案。 - dragoon

只是测试一下；当您将顶部高度设置为自动时，我想它应该可以工作。 - Dennis Hunink

刚刚测试了一下，底部元素被推到并放置在父元素的底部以下。 - dragoon

可能吧。如之前所述，真正的CSS解决方案是不可用的。这是你可以用CSS做到的最好的。另一方面，jQuery有完美的解决方案。 - Dennis Hunink

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jared Farrish · Accepted Answer

我不确定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 被推到底部）。我的问题是，你的设计中 DIV#content 的高度有什么影响吗？

编辑

请注意，如果你将 #container 设为 overflow: hidden 并将 #content 的 height 设为 100%，它会看起来像是 #container 正在缩小。

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

http://jsfiddle.net/V8yuN/2

我不确定这是否会导致你的设计出现问题，如果实际内容需要显示（例如，如果它是动态更改的）。

编辑2

以下代码可以实现所有功能，但无法实现#content文本的vertical-align：

HTML

<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>

CSS

#container {
    height: 100px;
    background: grey;
}
#push {
    height: 95px;
    overflow: hidden;
}
#list {
    max-height: 70px;
    overflow: auto;
    background: #ddf;
}
#content-inner {
    min-height: 100px;
    background: #dfd;
    margin: 0;
    border-left: 5px solid #fdf;
    border-right: 5px solid #fdf;
}
.border-top {
    background: #fdf;
    border-radius: 5px 5px 0 0;
    height: 5px;
}
.border-bottom {
    background: #fdf;
    border-radius: 0 0 5px 5px;
    height: 5px;
}

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