为什么 column-fill 属性不能按预期使用 "auto"？

Question

我创建了一个 html 页面，其样式为“2 列”，列填充属性设置为 "auto"。因此，第一列应该在第二列之前填满，而不是同等平衡（当 "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%;
}

奇怪的是，如果我删除 "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;
}

使用 this code，column-fill = auto 按预期工作：第一列先于第二列填满。

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

有人可能会争论是否要使用工作代码，但当有滚动条时（在非常短的浏览器 window尺寸）。这就是创建 "wrapper" div 的原因，但最重要的是，我想了解 column-fill = auto 不起作用的原因。

Answer 1

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

这个 SO-post、css-height-working-but-min-height-doesnt-work 阐明了它，并对如何处理基于百分比的高度提出了一般性建议。

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

这是你的 updated/cleaned up 版本，我删除了所有 min-height: 100%/height: 100%，wrapper 元素并给 .cahier min-height: 100vh

Updated codepen

堆栈片段

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>

为什么 column-fill 属性不能按预期使用 "auto"？

Why is column-fill property not working as expected with "auto"?

css

flexbox

css-multicolumn-layout

为什么 column-fill 属性 不能按预期使用 "auto"？

Why is column-fill property not working as expected with "auto"?

css

flexbox

css-multicolumn-layout

为什么 column-fill 属性不能按预期使用 "auto"？