为什么 column-fill 属性在“auto”中不能按预期工作？

Question

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

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>

CSS 代码：

body, html {height: 100%}

body{
    background-color:Sienna;    
}

#wrapper{
    margin: auto;
    position:relative;
    max-width: 1000px;
    height: 100%;
    top: 0px;
    bottom: 0px;
}

.livre{
    background-color: SaddleBrown;
    border-left: 2px solid black;
    border-right: 2px solid black;
    position:relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    display: flex;
}

.cahier{
    background-color: NavajoWhite;
    margin-left: 4%;
    margin-right: 4%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    position: relative;
    box-sizing: border-box;
    width: 92%;
    min-height: 100%;
    display: flex;
}

#tranche_g{
    width: 2%;
    min-height: 100%;
}

#feuillet{
    background-color: Bisque;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    box-sizing: border-box;
    width: 87%;
    min-height: 100%;
    padding-left: 1em;
    padding-right: 1em;

    /* Chrome, Safari, Opera */
    -webkit-column-count: 2; 
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid;
    -webkit-column-fill: auto;
    /* Firefox */
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid;
    -moz-column-fill: auto;
    /* Standard */
    column-count: 2;
    column-gap: 2em;   
    column-rule: 1px solid;     
    column-fill: auto;
}

#tranche_d{
    width: 10%;
    min-height: 100%;
}

奇怪的是，如果我删除“包装器”（最后一个父级）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;
}

使用this code，column-fill = auto 按预期工作：第一列在第二列之前被填满。

所以问题是为什么它不能与“包装器”div一起使用，我应该怎么做才能让它工作？

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

Answer 1

这里的主要问题是min-height: 100%，工作起来很痛苦。

这篇 SO 帖子 css-height-working-but-min-height-doesnt-work 对此进行了阐述，并对如何处理基于百分比的身高提出了一般性建议。

一种更现代的方法是改用viewport units。有了它，您可以在特定元素上设置 min-height: 100vh，它会像魅力一样发挥作用，并且您避免必须为每个元素设置高度，这通常会导致其他不需要的问题。 p>

这是你的更新/清理版本，我删除了所有min-height: 100%/height: 100%，包装器元素并给.cahier一个min-height: 100vh

Updated codepen

堆栈sn-p

body {
  background-color: Sienna;
}

.livre {
  background-color: SaddleBrown;
  border-left: 2px solid black;
  border-right: 2px solid black;
  position: relative;
}

.cahier {
  background-color: NavajoWhite;
  margin-left: 4%;
  margin-right: 4%;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  position: relative;
  min-height: 100vh;                      /*  added property  */
  display: flex;
}

#tranche_g {
  width: 2%;
}

#feuillet {
  background-color: Bisque;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  box-sizing: border-box;
  width: 87%;
  padding-left: 1em;
  padding-right: 1em;
  /* Chrome, Safari, Opera */
  -webkit-column-count: 2;
  -webkit-column-gap: 2em;
  -webkit-column-rule: 1px solid;
  -webkit-column-fill: auto;
  /* Firefox */
  -moz-column-count: 2;
  -moz-column-gap: 2em;
  -moz-column-rule: 1px solid;
  -moz-column-fill: auto;
  /* Standard */
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid;
  column-fill: auto;
}

#tranche_d {
  width: 10%;
}

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