1

所以基本上我想在另一个 div 中有两个 div，内部 div 应该占用所有可用空间。在我寻找解决方案时，我找到了许多解决方案，但我无法将任何解决方案应用于我的问题，因为所有解决方案都有一个共同点，即其中一个内部 div 具有固定大小。我的问题不是这种情况。

编辑： 我想指出 div a 和 b 的内容都是动态加载的。所以我不能为它们中的任何一个设置一个固定的大小。

所以让我们准确地说：我有一个 div “main” 这个 div 包含一个 div “a” 和另一个 div “b” 在 'a' 下面。div 'a' 是更重要的 div，因此它应该始终显示其所有内容并占用显示其内容所需的大小。由于内容是可变的，我在自动上设置了“a”。到目前为止，一切都很好。

现在我在设置 b 的大小时遇到​​了问题。它应该占用所有剩余的可用空间，如果这不足以显示其所有内容，它应该显示一个滚动条。

这可以用普通的html/css吗？

这是一个大致显示问题的链接 - 将真实代码复制到提琴手将是许多使用的外部库等的困难原因。文本显然应该留在主 div 的边界内。此外，所有文本只是一个占位符，因为稍后会自动填充

这是链接 http://jsfiddle.net/WH64v/5/

这是代码

    <body>
    <div style="width:300px; height:300px; border-style: solid;">
        <div style="border-style: solid; height: auto">
            hello1 <br>
            hello2
        </div>

        <div style="overflow: auto">
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            hello3 <br>
            end
        </div>
    </div>
</body>
4

2 回答 2

0

对的，这是可能的

解决方案 1 使用滚动条 [WITH FIXED HEIGHT]

.main{
  height:300px;/*whatever height you want for main... this height is eual to the summation of the heights of a and the portion of b you want to make visible at first */
  overflow:auto;/*it will bring scro bar if main requires */
}
.a{
   height:auto;
 }

没有滚动条的解决方案 2（更好的方法）:: [WITH OUT FIXED HEIGHT]

.main{
  height:auto;/*it will take the height as summation of both a and b automatically */
  overflow:hidden;/*very important */
}
.a{
   height:auto;
 }
.b{
   height:auto;
 }

这是你的小提琴:: FIDDLE [没有固定高度]

编辑 1::

这是您的代码：NEW FIDDLE [固定高度]

编辑 2 ::您的条件是 main 的高度是固定的，但 a 的高度是可变的，并且您只想为 b 滚动条，那么您必须为 b 有一个固定的高度，因此将您的代码更改为

.main{
  overflow:hidden;   
  width:300px; border-style: solid;height:300px;
}
.a{
   height:auto;border-style: solid;
}

.b{
  overflow: auto;
  height:250px

}

这是你的第三个 FIDDLE:: ONLY SCROLL B

编辑 3：您必须以b某种方式固定高度，以便 b 可以理解在哪个限制之后它将引入滚动条。您不能使 b 具有可变高度，因为那样会在引入该滚动条时感到困惑。所以你必须指定一个高度b

于 2013-07-28T12:07:29.117 回答
0

您必须为此使用表格样式。

HTML

<div style="width:300px; height:300px; border-style: solid; display: table;">
    <div style="display: table-row">
        <div style="border-style: solid; box-sizing:border-box; width: 100%; display: table-cell;">
            hello1 <br />
            hello2
        </div>
    </div>
    <div style="display: table-row; height: 100%;">
        <div style="float: left; overflow: auto; display: table-cell; box-sizing:border-box; height: 100%; width: 100%;">
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                hello3 <br />
                end
        </div>
    </div>
</div>

JSFiddle：http: //jsfiddle.net/gBgfe/

于 2013-07-28T13:09:47.377 回答