Css 为什么column fill属性不能像预期的那样使用"；汽车；？_Css_Flexbox_Css Multicolumn Layout

Css 为什么column fill属性不能像预期的那样使用"；汽车；？

css

Css 为什么column fill属性不能像预期的那样使用"；汽车；？,css,flexbox,css-multicolumn-layout,Css,Flexbox,Css Multicolumn Layout,我创建了一个带有“2列”样式的html页面，列填充属性设置为“自动”。因此，第一列应该在第二列之前填满，而不是相等平衡（当“column fill=auto”时）。行为不符合预期： HTML代码： <html> <body> <div id="wrapper"> <div class="livre"> <div class="cahier"> <d

我创建了一个带有“2列”样式的html页面，列填充属性设置为“自动”。因此，第一列应该在第二列之前填满，而不是相等平衡（当“column fill=auto”时）。行为不符合预期：

HTML代码：

<html>
<body>
    <div id="wrapper">
        <div class="livre">
            <div class="cahier">
                <div id="tranche_g">
                </div>
                <div id ="feuillet">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
                </div>
                <div id="tranche_d">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

奇怪的是，如果我删除“wrapper”（最后一个父级）div，并按如下所示修改“livre”div，它就会工作：

.livre{
    background-color: SaddleBrown;
    border-left: 2px solid black;
    border-right: 2px solid black;
    position:relative;
    box-sizing: border-box;
    max-width: 1000px;
    margin: auto;
    height: 100%;
    top: 0px;
    bottom: 0px;
}

使用，column fill=按预期自动完成工作：第一列在第二列之前被填满

所以问题是为什么它不能与“wrapper”div一起工作，我应该怎么做才能使它工作

有人可能会争辩说使用工作代码，但当有滚动条（在非常短的浏览器窗口大小上）时，它不会使填充页面剩余底部的“livre”div。这就是创建“包装器”div的原因，但最重要的是，我想了解column fill=auto不起作用的原因。

这里的主要问题是

min height:100%

，这可能是一个让人头疼的问题

因此，这篇文章，阐明了它，并就如何处理基于百分比的身高提出了一般性建议

一种更现代的方法是使用。这样，您可以在特定元素上设置

最小高度：100vh

，它将像一个符咒一样工作，并且您可以避免在每个元素上设置高度，这通常会导致其他不必要的问题

这是您的更新/清理版本，我删除了所有

minheight:100%/height:100%

，包装元素，并给出了

.cahier

minheight:100vh

堆栈片段

正文{
背景色：锡耶纳；
}
利弗尔先生{
背景色：马鞍色；
左边框：2倍纯黑；
右边框：2倍纯黑；
位置：相对位置；
}
卡希尔先生{
背景色：纳瓦霍灰岩；
左缘：4%；
保证金权利：4%；
左边框：1px纯色灰色；
右边框：1px纯色灰色；
位置：相对位置；
最小高度：100vh；/*添加属性*/
显示器：flex；
}
#第g批{
宽度：2%；
}
#费耶特{
背景色：深蓝色；
左边框：1px实心浅灰色；
右边框：1px实心浅灰色；
框大小：边框框；
宽度：87%；
左：1米；
右侧填充：1em；
/*铬、狩猎、歌剧*/
-webkit列数：2；
-webkit柱间距：2米；
-webkit列规则：1px实心；
-webkit列填充：自动；
/*火狐*/
-moz列数：2；
-莫兹柱间距：2米；
-moz列规则：1px实心；
-moz列填充：自动；
/*标准*/
列数：2；
柱间距：2米；
列规则：1px固体；
列填充：自动；
}
#d批款{
宽度：10%；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam interdum posuere orci nec。埃蒂亚姆·埃拉特·塞姆、莫利斯·非利奥·a、波苏尔·萨皮安。弗拉尼利亚·维尼纳提斯·阿利奎姆。在euismod aliquet mi tincidunt调味品中。多奈克梅特斯
lorem，tincidunt nec aliquet id，iaculis是一个精英。这是一个很好的例子。毛里斯·艾尼姆·波尔塔，秃鹫座a，人马座厄洛斯。阿利奎姆托托的库拉比图尔。塞德是最大的。埃尼姆·马萨悬钩子，权杖
射手座的生命是永恒的。鼠舌苔。这是一个在我国的精英。Nunc调味品eleifend-neque非vulputate。整数瓦里乌斯节杖阿利夸姆

谢谢！我感谢这次经验交流。我将您的解决方案应用到我的代码中，包括包装器，它工作得非常完美。我认为vh单位与屏幕有关，而不是与窗口大小有关，所以我很惊讶，如果窗口比屏幕小一点（但足够容纳文本），min height:100vh不会创建滚动条。如果你知道任何关于vh和viewport的好教程，欢迎使用。@Douglas查看这些：。。。伟大的谢谢

.livre{
    background-color: SaddleBrown;
    border-left: 2px solid black;
    border-right: 2px solid black;
    position:relative;
    box-sizing: border-box;
    max-width: 1000px;
    margin: auto;
    height: 100%;
    top: 0px;
    bottom: 0px;
}