ฉันจะรวม Flexbox และการเลื่อนแนวตั้งในแอปความสูงเต็มได้อย่างไร

ฉันต้องการใช้แอปแบบเต็มความสูงโดยใช้ flexbox ฉันพบสิ่งที่ฉันต้องการโดยใช้โมดูลเลย์เอาต์ flexbox เก่า ( display: box;และสิ่งอื่น ๆ ) ในลิงค์นี้: แอพCSS3 Flexbox เต็มความสูงและโอเวอร์โฟลว์

นี่เป็นวิธีแก้ปัญหาที่ถูกต้องสำหรับเบราว์เซอร์ที่รองรับคุณสมบัติ Flexbox CSS เวอร์ชันเก่าเท่านั้น

หากฉันต้องการลองใช้คุณสมบัติ flexbox ที่ใหม่กว่าฉันจะลองใช้วิธีที่สองในลิงค์เดียวกับที่ระบุว่าเป็นการแฮ็ก: โดยใช้คอนเทนเนอร์กับheight: 0px;. ทำให้แสดงการเลื่อนแนวตั้ง

ฉันไม่ชอบมันมากนักเพราะมันแนะนำปัญหาอื่น ๆ และเป็นวิธีแก้ปัญหามากกว่าวิธีแก้ปัญหา

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>

ฉันได้เตรียม JSFiddle ด้วยตัวอย่างพื้นฐาน: http://jsfiddle.net/ch7n6/

เป็นเว็บไซต์ HTML แบบเต็มความสูงและส่วนท้ายอยู่ด้านล่างเนื่องจากคุณสมบัติ flexbox ขององค์ประกอบเนื้อหา ฉันขอแนะนำให้คุณย้ายแถบระหว่างโค้ด CSS และผลลัพธ์เพื่อจำลองความสูงที่แตกต่างกัน

ขอบคุณhttps://stackoverflow.com/users/1652962/cimmanonที่ให้คำตอบแก่ฉัน

วิธีแก้ปัญหาคือการตั้งค่าความสูงให้กับองค์ประกอบที่เลื่อนได้ในแนวตั้ง ตัวอย่างเช่น:

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

องค์ประกอบจะมีความสูงเนื่องจาก flexbox คำนวณใหม่เว้นแต่ว่าคุณต้องการความสูงต่ำสุดเพื่อให้คุณสามารถใช้height: 100px;มันได้เหมือนกับ:min-height: 100px;

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

ดังนั้นทางออกที่ดีที่สุดหากคุณต้องการmin-heightเลื่อนแนวตั้ง:

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

หากคุณต้องการเลื่อนแนวตั้งแบบเต็มในกรณีที่ไม่มีพื้นที่เพียงพอที่จะดูบทความ:

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

รหัสสุดท้าย: http://jsfiddle.net/ch7n6/867/

ตัวแก้ไขข้อมูลจำเพาะ Flexbox ที่นี่

นี่เป็นการสนับสนุนให้ใช้ flexbox แต่มีบางสิ่งที่คุณควรปรับแต่งเพื่อพฤติกรรมที่ดีที่สุด

• อย่าใช้คำนำหน้า Flexbox ที่ไม่ได้เติมคำนำหน้าได้รับการสนับสนุนอย่างดีในเบราว์เซอร์ส่วนใหญ่ เริ่มต้นด้วยไม่ได้เติมคำนำหน้าเสมอและเพิ่มเฉพาะคำนำหน้าหากจำเป็นเพื่อรองรับ

• เนื่องจากส่วนหัวและส่วนท้ายของคุณไม่ได้หมายถึงการงอจึงควรflex: none;ตั้งค่าทั้งสองอย่างไว้ ตอนนี้คุณมีพฤติกรรมที่คล้ายกันเนื่องจากผลกระทบบางอย่างที่ทับซ้อนกัน แต่คุณไม่ควรพึ่งพาสิ่งนั้นเว้นแต่คุณจะสับสนโดยไม่ได้ตั้งใจในภายหลัง (ค่าเริ่มต้นคือflex:0 1 autoดังนั้นพวกเขาจึงเริ่มต้นที่ความสูงอัตโนมัติและสามารถหดตัวได้ แต่ไม่เติบโต แต่ก็เป็นoverflow:visibleค่าเริ่มต้นเช่นกันซึ่งจะเรียกค่าเริ่มต้นmin-height:autoเพื่อป้องกันไม่ให้หดตัวเลยหากคุณเคยตั้งค่าoverflowไว้พฤติกรรมของmin-height:autoการเปลี่ยนแปลงจะเปลี่ยนไป (เปลี่ยนเป็นศูนย์แทนที่จะเป็นเนื้อหาขั้นต่ำ) และพวกเขาจะถูกทำลายโดย<article>องค์ประกอบที่สูงเป็นพิเศษในทันใด)

• คุณสามารถทำให้ง่ายขึ้นได้<article> flexเช่นกันเพียงแค่ตั้งค่าflex: 1;แล้วคุณก็พร้อมที่จะไป พยายามยึดติดกับค่านิยมทั่วไปในhttps://drafts.csswg.org/css-flexbox/#flex-commonเว้นแต่คุณจะมีเหตุผลที่ดีในการทำสิ่งที่ซับซ้อนกว่านี้ - อ่านง่ายกว่าและครอบคลุมพฤติกรรมส่วนใหญ่ คุณจะต้องเรียกใช้

ข้อมูลจำเพาะปัจจุบันกล่าวถึงสิ่งนี้เกี่ยวกับflex: 1 1 auto:

ปรับขนาดรายการตามคุณสมบัติwidth/ heightแต่ทำให้มีความยืดหยุ่นเต็มที่เพื่อให้ดูดซับพื้นที่ว่างตามแกนหลัก หากทุกรายการมีทั้งflex: auto, flex: initialหรือflex: noneพื้นที่ว่างใด ๆ flex: autoในเชิงบวกหลังจากที่รายการที่ได้รับการขนาดใหญ่จะถูกกระจายไปยังรายการที่มี

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

สำหรับฉันดูเหมือนว่าถ้าคุณพูดว่าองค์ประกอบมีความสูง 100px มันจะถือว่าเป็นขนาดที่ "แนะนำ" มากกว่าไม่ใช่ขนาดที่แน่นอน เนื่องจากได้รับอนุญาตให้หดและเติบโตจึงต้องใช้พื้นที่มากเท่าที่อนุญาต นั่นเป็นเหตุผลที่การเพิ่มบรรทัดนี้ในองค์ประกอบ "หลัก" ของคุณได้ผล: height: 0(หรือจำนวนเล็กน้อยอื่น ๆ )