Question

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

HTML code：

<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按预期工作：第一列在第二列之前完成。

所以问题是为什么它不能与“包装”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，它将像魅力一样工作，并且您可以避免必须在每个元素上设置高度，这通常会导致其他不必要的问题。

以下是您的更新/清理版本，其中我删除了所有min-height: 100%/height: 100%，包装元素并将.cahier一个min-height: 100vh

Updated codepen

Stack snippet

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

为什么列填充属性与“auto”无法正常工作？

1 个答案: