Question

我正在尝试创建一个包含三个div的div。第一个和最后一个div应根据其内容确定大小。如果它们包含10行文本，则它们应足够大，以显示没有溢出或滚动。

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

我得到了一个局部解决方案，其中第一个和第三个块被修复，第三个块将使用剩余的大小。我不知道如何跳转允许根据内容调整第一个和第三个块的大小。

非常感谢有关如何执行此操作的任何提示。

这是我到目前为止所做的：

enter image description here

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

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

CSS＆amp; HTML
Pure＆amp;标准JS
JS with dojo
其他方法

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

CSS：大小div，所以中间div使用所有剩余空间

1 个答案: