Question

说明1：子div的数量不固定。
澄清2：每个孩子的内容都不得更改孩子的大小。
说明三：每个孩子的身高由他们的班级定义。
说明4：解决方案不能使用除div之外的任何标签。

这是我在StackOverflow上遇到的第一个问题，我已经尝试了几天以垂直方向完美地划分一个容器，也就是说，子级必须占据所有父级空间而没有重叠，没有必要处理溢出，但是期望隐藏或滚动。（Image）Fiddle。

	#body {height:500px; text-align:center} /* assume height = 100% of body */
	/* Some colors for visibility */
	#body > div   { box-shadow:inset 0px 0px 5px;}
	.red   { color: red; background:pink; }
	.blue  { color: blue; background:lightblue; }
	.green { color: green; background:lightgreen; }

	/* You are not allowed to modify the height of the parent */
	.parent{ height:40%; width: 90%; overflow:hidden; margin:3%; border:dotted 3px;} 
	/* However you are free to modify anything else */
	
	/* Naive Approach */
	.child,.lastchild {overflow:auto;}
	.child { height: 20%; }
	.special { height: 30%; }
	#example-1 > .lastchild { height:80%; } /* 100% -20% */
	#example-2 > .lastchild { height:50%; } /* 100% -20% -30% */

<div id="body">
example-1
	<div id="example-1" class="parent">
		<div class="red child">child 1</div>
		<div class="blue lastchild">child 2 (lastchild)</div>		
	</div>
example-2
	<div id= "example-2"class="parent">
		<div class="red child special">child 3</div>
		<div class="blue child">child 4 <br> with scroll <br> and more <br> lines </div>
		<div class="green lastchild">child 5 (lastchild)</div>		
	</div>
</div>

听起来很简单，对吧？...请继续阅读。

每个容器（.parent）的高度/宽度都有设置，但是确切的数量对您来说是未知的（我使用浏览器的大小来模拟小提琴中的此限制）。
大多数孩子的身高为20％；但是，一些“特殊”孩子的身高为30％；您无法控制其中有多少个特殊子项（如果存在），这就是为什么幼稚的方法行不通的原因。
对于预期的解决方案，它可能仅涉及CSS（不允许使用脚本），并且必须支持所有以下各项：Firefox（62 +），Chrome（69 +），Edge（42+）和IE（ 11 +）。

一些最后的笔记：

.lastchild被保证是其.parent的最后一个孩子
您可以假设.lastchild总是有一些高度
您可以假设每个.parent都有一个.lastchild和至少一个其他.child
两个类都不会有元素（.child和.lastchild是互斥的）
您不必担心移动支持。

到目前为止，我已经尝试过：

.lastchild {位置：绝对；底部：0px; top：???;} bottom是正确的，但无论如何都需要计算top。
.lastchild {位置：相对； top：0px; bottom：???;} top是正确的，但bottom对相对div的作用不同
这个问题听起来可能与粘性页脚问题类似，但是这个问题的全部重点是最后一个孩子的身高不是固定的。
这个问题听起来似乎与Equal Height Columns类似，但这是一个不同的问题。
我不喜欢将表用于非表格数据，但是作为一个实验，我尝试了一下。几乎可以正常工作，但是表格会尝试适合所有内容，并通过更改单元格的大小来适应溢出，但这不会。
Stack Overflow中的许多问题都解决了类似的问题，但是，几乎没有任何问题限制了javascript的使用，因此，大多数解决方案仅在页面加载后才调整div的大小，如上所述不是 strong>可以接受的解决方案。
需要以不同方式处理每个浏览器的解决方案将被皱眉，但如果不存在其他解决方案，则将被接受。
使用display：table或display：grid可以很好地使用，并且只要给出合理的解释就可以回答。（考虑到IE网格的行为与大多数浏览器不同）

PD：我在 display：flex 方面有0年的经验，但是我被认为它包含了我一直在寻找的解决方案，这看起来非常有希望，我将尽快进行更新。：

Fill remaining vertical space with CSS using display:flex

仅限CSS：具有未知数量的子项且没有溢出的容器的垂直划分

0 个答案: