爲什麼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」那樣按預期工作？

回答

相關問題