3

我正在尝试制作一个包含三个 div 的 div。第一个和最后一个 div 应根据其内容调整大小。如果它们包含 10 行文本，它们应该足够大以显示它们而不会溢出或滚动。

中间的 div 应该使用剩余的空间，并且当没有足够的空间来显示它的全部内容时应该使用滚动条。

我得到了一个部分解决方案，其中第一个和第三个块是固定的，第三个块将使用剩余的大小。我不确定如何跳转以允许根据其内容调整第一个和第三个块的大小。

任何有关如何做到这一点的提示将不胜感激。

这是我到目前为止所拥有的：

在此处输入图像描述

<html>

    .outerDiv{
        /* The contents of this don't really matter */
        position: absolute;
        height:400px;
        top:25px;
    }

    .innerA{
        position: absolute;
        top:0ex;
        height:3ex; /* How can I set this based on the contents of the div? */
    }

    .innerB{
        position: absolute;
        top: 4ex; /* This needs to be based on the size of innerA */
        bottom: 4ex; /* This needs to be based on the size of innerC */
        overflow-y: scroll;
    }

    .innerC{
        position: absolute;
        height:3ex; /* How can I set this based on the contents of the div? */
        bottom:0ex;
    }

    </style>


    <div class="outerDiv" style="width:100%; border:1px solid #888888;">

        <div class="innerA" style="width:70%; border:1px solid #000088;"></div>

        <div class="innerB" style="width:60%; border:1px solid #008800;">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>vv</div>

        <div class="innerC" style="width: 50%;border:1px solid #001100;"></div>

    </div>


</html>

我的偏好是使用以下方法解决问题：

  1. CSS & HTML
  2. 纯和标准 JS
  3. 带道场的 JS
  4. 其他方法
4

1 回答 1

1

如果您不介意 jquery，您可以计算 A 和 C div 的高度，然后从 outerDiv 中减去：

$(".innerB").each(function() {
   var outerDivHeight = $('.outerDiv').outerHeight();
   var innerAHeight = $('.innerA').outerHeight();
   var innerCHeight = $('.innerC').outerHeight();
   var innerBHeight = outerDivHeight - innerAHeight - innerCHeight;
   $(this).css("height", innerBHeight);
});

这是一个小提琴：http: //jsfiddle.net/Sz6CL/

于 2013-06-27T22:38:09.403 回答