为什么column-fill属性不能像“auto”那样按预期工作？

我创建了一个带有“2列”风格的html页面，其中列填充属性设置为“auto”。因此，第一列应该在第二列之前全部填满，而不是等同平衡（当“column-fill = auto”时）。 The code不表现为预期：为什么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>

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

With this code，column-fill = auto按预期工作：第一列在第二列之前全满。

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

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

来源

2017-07-28 Douglas

这里的主要问题是min-height: 100%，并且可能是一个痛苦的工作。

这个SO-post，css-height-working-but-min-height-doesnt-work，揭示了它，并就如何处理百分比高度提出了一般性建议。

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

这里是你的更新/清理的版本，在这里我删除所有min-height: 100%/height: 100%的包装元素，给.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>

来源

2017-07-28 21:34:51 LGSon

谢谢！我很欣赏这次经验交流。我将你的解决方案应用到我的代码中，包括包装器，它非常完美！ https://codepen.io/Jacknight/pen/brEdyj。我认为vh单位与屏幕没有关联到窗口大小有关，所以我很惊讶，如果窗口比屏幕小一点（但对于文本足够大），min-height：100vh不会创建滚动条。如果你知道任何有关vh和视口的好教程，欢迎。 – Douglas

@Douglas检查这些：https://css-tricks.com/fun-viewport-units/ ... https://css-tricks.com/viewport-sized-typography/ – LGSon

太棒了！谢谢！ – Douglas

为什么column-fill属性不能像“auto”那样按预期工作？

回答

相关问题