আমি কীভাবে পূর্ণ উচ্চতার অ্যাপ্লিকেশনটিতে ফ্লেক্সবক্স এবং উল্লম্ব স্ক্রোলটি একত্রিত করতে পারি?

Question 1

আমি ফ্লেক্সবক্স ব্যবহার করে একটি পূর্ণ উচ্চতার অ্যাপ্লিকেশন ব্যবহার করতে চাই। আমি display: box;এই লিঙ্কটিতে পুরানো ফ্লেক্সবক্স লেআউট মডিউল ( এবং অন্যান্য জিনিস) ব্যবহার করতে চাই তা পেয়েছি : CSS3 ফ্লেক্সবক্স পূর্ণ-উচ্চতা অ্যাপ্লিকেশন এবং ওভারফ্লো

এটি ব্রাউজারগুলির জন্য সঠিক সমাধান যা কেবলমাত্র ফ্লেক্সবক্স সিএসএস বৈশিষ্ট্যের পুরানো সংস্করণকে সমর্থন করে।

আমি যদি আরও নতুন ফ্লেক্সবক্স বৈশিষ্ট্যগুলি ব্যবহার করে দেখতে চাই তবে আমি হ্যাক হিসাবে তালিকাভুক্ত একই লিঙ্কে দ্বিতীয় সমাধানটি ব্যবহার করার চেষ্টা করব: এর সাথে একটি ধারক ব্যবহার করে 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>

স্নিপেট প্রসারিত করুন

আমি একটি বেসিক উদাহরণ সহ একটি জেএসফিডেল প্রস্তুত করেছি: http://jsfiddle.net/ch7n6/

এটি একটি সম্পূর্ণ উচ্চতার এইচটিএমএল ওয়েবসাইট এবং সামগ্রীর উপাদানটির ফ্লেক্সবক্স বৈশিষ্ট্যের কারণে পাদলেখ নীচে রয়েছে। আমি আপনাকে সিএসএস কোড এবং ফলাফলের মধ্যে বিভিন্ন উচ্চতা অনুকরণ করার জন্য বারটি সরাতে পরামর্শ দিই।

Question 2

Https://stackoverflow.com/users/1652962/cimmanon ধন্যবাদ যা আমাকে উত্তর দিয়েছে।

সমাধানটি উল্লম্ব স্ক্রোলযোগ্য উপাদানটিতে একটি উচ্চতা নির্ধারণ করছে। উদাহরণ স্বরূপ:

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

উপাদান হবে কারণ flexbox এটা recalculates যদি না আপনি একটি চান উচ্চতা আছে সর্বনিম্ন উচ্চতা যাতে আপনি ব্যবহার করতে পারেন 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/

Question 3

ফ্লেক্সবক্স স্পেক সম্পাদক এখানে।

এটি ফ্লেক্সবক্সের উত্সাহিত ব্যবহার, তবে সর্বোত্তম আচরণের জন্য কয়েকটি জিনিস আপনি টুইট করতে হবে।

উপসর্গ ব্যবহার করবেন না। অব্যবস্থাপিত ফ্লেক্সবক্স বেশিরভাগ ব্রাউজারগুলিতে সু-সমর্থিত। সর্বদা অপ্রস্তুত দিয়ে শুরু করুন এবং এটি সমর্থন করার জন্য প্রয়োজন হলে কেবল উপসর্গ যুক্ত করুন।
যেহেতু আপনার শিরোনাম এবং পাদচরণগুলি বোঝানো নয়, তাদের উভয়ই flex: none;সেগুলি স্থাপন করা উচিত । কিছু ওভারল্যাপিং এফেক্টের কারণে এই মুহূর্তে আপনার অনুরূপ আচরণ রয়েছে, তবে আপনি যদি পরে দুর্ঘটনাক্রমে নিজেকে বিভ্রান্ত না করতে চান তবে আপনার উপর নির্ভর করা উচিত নয়। (ডিফল্ট হ'ল flex:0 1 auto, সুতরাং তারা তাদের অটো উচ্চতায় শুরু হয় এবং সঙ্কুচিত হতে পারে তবে বাড়তে পারে না, তবে এটি overflow:visibleডিফল্টরূপেও হয় যা min-height:autoএগুলি তাদের সঙ্কুচিত হওয়া থেকে রোধ করতে তাদের ডিফল্টটিকে ট্রিগার করে you আপনি যদি কখনও overflowসেগুলি সেট করেন তবে min-height:autoপরিবর্তনের আচরণ (ন্যূনতম সামগ্রীর চেয়ে শূন্যে স্যুইচ করা) এবং হঠাৎ অতিরিক্ত লম্বা <article>উপাদান দ্বারা তারা স্কুইশ হয়ে যাবে )
আপনি খুব সহজ করতে পারেন <article> flex- ঠিক সেট করুন flex: 1;এবং আপনি যেতে ভাল হবে। আপনার আরও জটিল কিছু করার উপযুক্ত কারণ না থাকলে https://drafts.csswg.org/css-flexbox/#flex-common এ সাধারণ মানগুলির সাথে তাল মিলিয়ে চলার চেষ্টা করুন - বেশিরভাগ আচরণগুলি পড়তে এবং আচ্ছাদন করা তাদের পক্ষে সহজ're আপনি প্রার্থনা করতে চাইবেন।

Question 4

বর্তমান অনুমানটি এ সম্পর্কে বলে 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(বা অন্য কোনও ছোট সংখ্যা)।