Css 将两个div转换为另一个div，两个div的大小都是可变的_Css_Html

Css 将两个div转换为另一个div，两个div的大小都是可变的

css html

Css 将两个div转换为另一个div，两个div的大小都是可变的,css,html,Css,Html,所以基本上我想在另一个div中有两个div，内部div应该占据所有可用的空间。在我寻找解决方案的过程中，我找到了许多解决方案，但我无法将任何解决方案应用于我的问题，因为所有的解决方案都有一个共同点，即一个内部div具有固定的大小。我的问题不是这样编辑：我想指出，diva和b的内容都是动态加载的。所以我不能为它们中的任何一个设定一个固定的尺寸因此，让我们准确地得出以下结论：我有一个潜水舱此分区包含一个分区a和“a”下面的另一个分区b。 Div'a'是更重要的Div，因此它应该始终显示其所

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

编辑：我想指出，diva和b的内容都是动态加载的。所以我不能为它们中的任何一个设定一个固定的尺寸

因此，让我们准确地得出以下结论：我有一个潜水舱此分区包含一个分区a和“a”下面的另一个分区b。 Div'a'是更重要的Div，因此它应该始终显示其所有内容，并根据显示内容的需要占用尽可能多的大小。由于内容是可变的，我将“a”设置为自动。到目前为止还不错

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

这在普通html/css中可能吗

这里有一个链接粗略地说明了这个问题——将真实代码复制到fiddler中会很困难，因为使用了很多外部库等等。文本显然应该位于主div的边界内。此外，所有文本只是一个占位符，因为稍后将自动填充

这是链接

这是密码

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

是的，这是可能的

解决方案1使用滚动条[具有固定高度]

解决方案2无滚动杠铃方法：：[无固定高度]

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

编辑1:：

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

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

}

这是你的第三把小提琴：：

编辑3：您必须以某种方式固定b的高度，以便b能够理解在哪个限制之后它将引入滚动条。您不能使用可变高度创建b，因为这样在引入滚动条时它会混淆。因此，您必须为b指定高度。您必须为该高度使用表格样式

HTML

JSFiddle:

您能发布一些代码吗？是的，请在JSFiddle上发布，这样我们就可以查看和编辑它了。如果主div有固定的高度，那么设置.b{overflow-y:auto；height:100%；}应该接近解决方案。遗憾的是，这对我没有帮助：解决方案2对我不起作用，因为主div必须是固定的大小。解决方案1不是因为我只想在需要滚动条的子分区中显示滚动条。我认为您缺少了一些东西。第二个解决方案对我来说很好。我已经给了您fiddleNo，您缺少了它：“main”分区的大小是固定的。它可能不会被更改。亲爱的，我没有遗漏任何东西。解决方案一中显示了这一点。首先检查所写内容。这是新的小提琴检查它。我给了你两种解决方案，有固定高度和没有固定高度。你应该先阅读它。现在对你来说没问题吗？很抱歉，你的解决方案有问题。如果仔细观察，您会发现高度大于宽度，尽管两者都设置为300px。这是因为您使用100%作为b的高度。如果这样做，b高度将是其父元素大小300px的100%。这就是为什么main不再是NT 300px了——它不再是b300+无论a是什么

.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;
 }

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

.b{
  overflow: auto;
  height:250px

}

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