第一个我创建了一个模板，分为页眉和主内容。页眉是可选的，并且会根据内容自动调整高度。父元素的其余高度必须由主元素填充。我试着用display flex和gap来做这个。但是当第一个元素不在那里的时候差距仍然存在。当有两个元素的时候，gap必须是16px。当有一个元素的时候，有没有可能用样式来消除gap，或者有没有其他的方法来管理元素的高度，这样主元素总是占据剩余的空间？
gupuwyp21#
第一个您可以使用
.header { background: blue; margin-bottom: 16px; }
而不是gap: 16px;
gap: 16px;
icomxhvb2#
差距属性应用于容器。不能为子div设置特定的间隙，因为它是其父div的属性。我的建议是用display：none属性设置你的空div，一旦你用javascript向它注入内容，就把它的显示设置为“block”，“flex”，或者任何它在可见时使用的显示属性。另一个解决方案是在子组件上用边距或填充底部来替换“gap”。由于这是子组件的一个属性，您将能够做出个别的例外。
2条答案
按热度按时间gupuwyp21#
第一个
您可以使用
而不是
gap: 16px;icomxhvb2#
差距属性应用于容器。不能为子div设置特定的间隙，因为它是其父div的属性。
我的建议是用display：none属性设置你的空div，一旦你用javascript向它注入内容，就把它的显示设置为“block”，“flex”，或者任何它在可见时使用的显示属性。
另一个解决方案是在子组件上用边距或填充底部来替换“gap”。由于这是子组件的一个属性，您将能够做出个别的例外。