Tam yükseklikte bir uygulamada flexbox ve dikey kaydırmayı nasıl birleştirebilirim?

Flexbox kullanarak tam yükseklikte bir uygulama kullanmak istiyorum. display: box;Bu bağlantıda eski flexbox düzen modülünü ( ve diğer şeyleri) kullanarak istediğimi buldum : CSS3 Flexbox tam boy uygulaması ve taşma

Bu, yalnızca flexbox CSS özelliklerinin eski sürümünü destekleyen tarayıcılar için doğru bir çözümdür.

İle bir kap kullanılarak: Ben daha yeni FlexBox özelliklerini kullanmayı denemek istiyorsanız, ben bir yazar olarak listelenen aynı linkte ikinci çözümü kullanmaya çalışacağım height: 0px;. Dikey bir kaydırma gösterir.

Bundan pek hoşlanmıyorum çünkü başka sorunları da beraberinde getiriyor ve çözümden çok geçici bir çözüm.

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

Temel bir örnekle de bir JSFiddle hazırladım: http://jsfiddle.net/ch7n6/

Bu tam yükseklikte bir HTML web sitesidir ve içerik öğesinin flexbox özellikleri nedeniyle altbilgi en altta yer alır. Farklı yüksekliği simüle etmek için çubuğu CSS kodu ile sonuç arasında hareket ettirmenizi öneririm.

Bana cevabı veren https://stackoverflow.com/users/1652962/cimmanon'a teşekkürler .

Çözüm, dikey kaydırılabilir öğeye bir yükseklik ayarlamaktır. Örneğin:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

Eleman edecek bir istemedikçe FlexBox onu yeniden hesaplar nedeniyle yüksekliğe sahip dk-height kullanabilirsiniz böylece height: 100px;tam olarak aynı olduğunu:min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

min-heightDikey kaydırmada bir istiyorsanız en iyi çözüm :

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Makaleyi görmek için yeterli alan olmaması durumunda sadece tam dikey kaydırma istiyorsanız:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

Nihai kod: http://jsfiddle.net/ch7n6/867/

Flexbox özellik düzenleyicisi burada.

Bu, flexbox'ın teşvik edilmiş bir kullanımıdır, ancak en iyi davranış için ince ayar yapmanız gereken birkaç şey vardır.

• Ön ek kullanmayın. Öneksiz flexbox çoğu tarayıcıda iyi desteklenmektedir. Her zaman öneksiz ile başlayın ve sadece desteklemek için gerekirse önekler ekleyin.

• Üstbilginiz ve altbilginiz esnemeye yönelik olmadığından, her ikisi de flex: none;onlara ayarlanmış olmalıdır . Şu anda, bazı örtüşen etkiler nedeniyle benzer bir davranışınız var, ancak daha sonra kazayla kafanızı karıştırmak istemediğiniz sürece buna güvenmemelisiniz. (Varsayılan olarak flex:0 1 auto, otomatik yüksekliklerinden başlarlar ve küçülebilirler ancak büyüyemezler, ancak aynı zamanda overflow:visiblevarsayılan olarak onlar da küçülmelerini min-height:autoönlemek için varsayılanlarını tetikler . Bunlara bir kez ayarlarsanız overflow, min-height:autodeğişikliklerin davranışı (minimum içerik yerine sıfıra geçilir) ve aniden ekstra uzun <article>öğe tarafından ezilirler .)

• Siz de basitleştirebilirsiniz <article> flex- sadece ayarlayın flex: 1;ve gitmeniz iyi olur. Daha karmaşık bir şey yapmak için iyi bir nedeniniz yoksa , https://drafts.csswg.org/css-flexbox/#flex-common adresindeki ortak değerlere bağlı kalmaya çalışın - davranışların çoğunu okumak ve kaplamak daha kolaydır. çağırmak isteyeceksiniz.

Mevcut spesifikasyon şunları söylüyor flex: 1 1 auto:

Öğeyi width/ heightözelliklerine göre boyutlandırır, ancak onları tamamen esnek hale getirir, böylece ana eksen boyunca herhangi bir boş alanı emer. Tüm öğeler ise flex: auto, flex: initialya flex: none, boyutlandınîmış öğeleri sonra herhangi olumlu boş alan ile öğelere eşit olarak dağıtılacaktır flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

Bana bir öğenin 100 piksel uzunluğunda olduğunu söylerseniz, mutlak değil, daha çok "önerilen" bir boyut olarak ele alınır. Küçülmesine ve büyümesine izin verildiği için, izin verdiği kadar yer kaplar. Bu nedenle, bu satırı "ana" öğenize eklemek işe height: 0yarar : (veya herhangi bir küçük sayı).