html - সকল - লেআউট

পটভূমির রঙ ওভারফ্লো অঞ্চলে প্রসারিত করুন (3)

যদি পিতামাতার সামগ্রীর সামগ্রীর উচ্চতা 10,000 px হয় তবে overflow: auto এলিমেন্টটি 700px উচ্চতার সাথে রেন্ডার করা হয় আমি কীভাবে aside শিশু উপাদানটিকে ডিফল্ট 700px এর পরিবর্তে 10,000px হিসাবে রেন্ডার করতে বাধ্য করব? আপনি ফিডল স্ক্রোল করা শুরু করার মুহুর্তে আপনি সাদা পটভূমি দেখতে পাবেন।

আর কোনও উপাদান যুক্ত না করতে পারে ( ::after এবং ::before যদিও গ্রহণযোগ্য)।
#body উপাদানটিতে অবশ্যই #body উপাদান উপাদান (কোনও position: fixed; ) এর মাধ্যমে main উপাদানটির বিষয়বস্তু সহ এটির লিখিত সামগ্রী থাকতে হবে।
aside উপাদানের অবশ্যই background-color প্রসারিত হতে হবে একেবারে শীর্ষ থেকে খুব নীচে পর্যন্ত (উদাহরণস্বরূপ 5,000 px বা 10,000px) প্রাথমিক দৃশ্যমান ভাঁজের নিচে ।
aside উপাদানটির নিজস্ব overflow: auto; হওয়া উচিত নয় overflow: auto; ।
গতিশীল (কম height: 10000px জন্য) বোঝায় আমরা স্থির height নির্ধারণ করতে পারি না , যেমন height: 10000px কারণ আমরা height: 10000px না যে রেন্ডার করা উচ্চতা কী হবে।

আমার উদাহরণে আপনি যে সবুজ background-color শেষ হতে শুরু করবে সেই মুহুর্তে, আমি aside উপাদানটি সামগ্রীর নীচের অংশে প্রসারিত করতে চাই।

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Overflow Flex Box Issue</title>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}

aside
{
 background-color: #afa;
 order: 2;
 width: 20%;
}

body
{
 display: flex;
 flex-direction: column;
 height: 100%;
}

body > header
{
 align-self: stretch;
 background-color: #faa;
 flex: 0 1 auto;
 min-height: 56px;
 order: 1;
}

body > footer
{
 align-self: auto;
 background-color: #aaf;
 flex: 0 1 auto;
 min-height: 36px;
 order: 2;
}

html {height: 100%;}

main
{
 background-color: #cfc;
 order: 1;
 width: 80%;
}

#body
{
 display: flex;
 order: 2;
 overflow: auto;
}

</style>
</head>

<body>

<div id="body">
<main>
<article>
<p>article</p>
<p>article</p>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside><p>&#60;aside&#62;, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>

<header>The body &#62; header element; element 2, order: 1;.</header>
<footer>The body &#62; footer element; element 3, order: 3;.</footer>

</body>
</html>

আমি ফলাফলটি অর্জনের উদ্দেশ্যে এই #body করি নি কারণ আমি অনেক ক্ষেত্রে #body উপর background-image সেট করতে চাই যদিও এটি আমি কীভাবে জিনিসগুলিকে পরিচালনা করি তা গ্রহণযোগ্য বিষয় হতে পারে, এখানে Fiddle । আমি নিশ্চিত যে এই সমস্যাটি ভবিষ্যতে কোনও সময় সমাধান করা হবে।

#body
{
 background-image: linear-gradient(to right, #cfc 0%, #cfc 79%, #afa calc(79% + 4px), #afa 100%);
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Overflow Flexbox Issue</title>
<style type="text/css">
* {border: 0; margin: 0; padding: 0; scroll-behavior: smooth;}

aside
{
 background-color: ;
 order: 2;
 width: 20%;
}

body
{
 display: flex;
 flex-direction: column;
 height: 100%;
 overflow: hidden;
}

body > header
{
 align-self: stretch;
 background-color: #faa;
 flex: 0 1 auto;
 min-height: 56px;
 order: 1;
}

body > footer
{
 align-self: auto;
 background-color: #aaf;
 flex: 0 1 auto;
 min-height: 36px;
 order: 2;
}

html {height: 100%;}

main
{
 order: 1;
 width: 80%;
}

#body
{
 background-image: linear-gradient(to right, #cfc 0%, #cfc 79%, #afa calc(79% + 4px), #afa 100%);
 display: flex;
 order: 2;
 overflow: auto;
}
</style>
</head>

<body>

<div id="body">
<main>
<article>
<p>article</p>
<p>article</p>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside><p>&#60;aside&#62;, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>

<header>The body &#62; header element; element 2, order: 1;.</header>
<footer>The body &#62; footer element; element 3, order: 3;.</footer>

</body>
</html>

এটি আপনার সমস্ত মানদণ্ড পূরণ করে কিনা তা নিশ্চিত নন তবে this সমাধান সম্পর্কে কীভাবে? সহজভাবে পাত্রে ডিভটি একটি পাত্রে মুড়িয়ে ফেলা এবং ওভারফ্লো-ওয়াইকে স্বয়ংক্রিয়ভাবে সেট করা এর কৌশলটি করা উচিত:

.container {
  overflow-y: auto;
}

* {
    border: 0;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    position: relative;
}

.container {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.main-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

main {
    flex: 5;
}

aside {
    flex: 1;
}

header {
    min-height: 36px;
    background-color: yellowgreen;
    position: fixed;
    width: 100%;
    top: 0;
}

main {
    background-color: #cfc
}

aside {
    background-color: #afa;
}

footer {
    background-color: indigo;
    min-height: 36px;
    position: fixed;
    width: 100%;
    bottom: 0;
}

<div class="container">
		<header>header</header>

		<div class="main-content">
				<main>
					<article>
						<p>article</p>
						<div style="height: 10000px;">10,000px</div>
					</article>
				</main>
				<aside>
					aside
				</aside>
		</div>

		<footer>footer</footer>
		
	</div>