0
私は自分の体の空間を3つに分割してヘッダ、コンテンツ、フッターとしました。 （私は底に粘着性のようなフッターの外観が必要です）ので、flexプロパティを使用してレイアウトを作成しました。しかし、私はメインのコンテナボックスにスクロールバーを追加できますか？フレックスコンテナの内部にオーバーフローを残す方法は？
私は運を試みましたが、運がありませんでした。ここに私のコードは次のとおりです。
*{
\t \t \t padding:0;
\t \t \t margin:0;
\t \t \t box-sizing: border-box;
\t \t }
\t \t html,body{
\t \t \t height: 100%;
\t \t }
\t \t body > section{
\t \t \t display: flex;
\t \t \t background: gray;
\t \t \t border:5px solid green;
\t \t \t min-height: 100%;
\t \t \t flex-direction: column;
\t \t }
\t \t header{
\t \t \t background: lightgreen;
\t \t }
\t \t section section{
\t \t \t background: lightblue;
\t \t \t flex:1 0 0;
\t \t }
\t \t h1{
\t \t \t padding:2rem;
\t \t }
\t \t div.content{
\t \t \t background: yellow;
\t \t \t height: 100%;
\t \t \t min-height: 100%;
\t \t \t overflow-y: auto;
\t \t }<section>
\t \t <header>
\t \t \t <h1>Header will go here!</h1>
\t \t </header>
\t \t <section>
\t \t \t <div class="content">
\t \t \t \t <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde deserunt et, quibusdam quidem dolores minus cupiditate veniam laborum, placeat, maiores illum voluptas, at ipsam voluptates! Alias enim, reiciendis debitis commodi.</div>
\t \t \t \t <div>Quasi, exercitationem, at! Voluptas, similique corrupti reprehenderit odio fuga omnis cum dicta, fugiat vero, eveniet neque! Illo architecto aut ullam provident, aliquid voluptatum voluptates, consequuntur similique, soluta sunt voluptatem blanditiis!</div>
\t \t \t \t <div>A animi dignissimos ipsam, minus et odit ea. Dignissimos nesciunt, numquam eius expedita quas quibusdam vitae ea unde molestiae aperiam labore adipisci officia veritatis iste, omnis odio ipsam soluta doloremque?</div>
\t \t \t \t <div>Eveniet, explicabo, commodi? Accusantium cum hic doloremque ullam, eos explicabo commodi voluptatibus animi nesciunt dicta, nam fuga iure sapiente cupiditate nihil corrupti nemo inventore vel at laboriosam, ea praesentium id.</div>
\t \t \t \t <div>Ullam vel, sequi dolor distinctio repellendus ipsa assumenda in, fuga ab vitae iusto vero? Facilis quos quam, provident quia, a voluptatum nulla reiciendis nostrum, repellat repudiandae necessitatibus consequuntur odit praesentium.</div>
\t \t \t \t <div>Iusto, obcaecati. Praesentium aliquid error, iste labore obcaecati sit, quo soluta necessitatibus voluptatibus suscipit ut veritatis repudiandae minima quibusdam accusamus itaque sunt consequuntur libero dolorem commodi! Libero, maiores esse culpa.</div>
\t \t \t \t <div>Aliquam earum ab delectus ipsum architecto ipsam, sed repudiandae, consequuntur doloribus sit optio. Consectetur temporibus quia ipsa! Voluptas, esse debitis recusandae atque. Autem facilis deserunt id quia pariatur officiis sapiente.</div>
\t \t \t \t <div>Magni aspernatur ab vitae quae quod eius est consequuntur similique neque, soluta repellendus perspiciatis placeat voluptatem aut quidem provident autem consequatur nisi fugit deserunt, eligendi laboriosam veritatis! Voluptate similique, libero.</div>
\t \t \t \t <div>Omnis repellat alias ducimus facere dolor illum consequuntur? Ipsa nihil expedita sapiente odit, eum aut similique iusto. Illum deleniti natus quo in, facere voluptatibus velit, eius architecto, unde quos reiciendis.</div>
\t \t \t \t <div>Tempore nisi quo quibusdam temporibus tenetur ducimus, veritatis sed quas incidunt repellendus vero, officia veniam commodi doloremque excepturi asperiores dolorum minima corporis hic ipsam vel assumenda minus, aperiam autem! Suscipit?</div>
\t \t \t \t <div>Sit velit quod voluptas natus! Consequuntur asperiores commodi delectus perspiciatis, accusantium tempore consectetur repudiandae minus eaque at, labore exercitationem eligendi sequi quae esse recusandae. Aut eius facere qui ut ex.</div>
\t \t \t \t <div>Architecto reprehenderit impedit blanditiis repellat laboriosam, distinctio voluptate, ut expedita autem quis explicabo eius necessitatibus quod sed, iusto fuga facilis dicta mollitia praesentium exercitationem consequatur sunt. Perspiciatis consequuntur ex pariatur.</div>
\t \t \t \t <div>Magnam sapiente iste nisi, nostrum ut voluptatem vero facere ratione facilis nesciunt est quo natus assumenda ipsa hic. Tempora corrupti officiis minima cupiditate odio nisi nobis, doloribus veniam, fugit rem.</div>
\t \t \t \t <div>Aliquam officia ad aperiam, molestiae reiciendis repudiandae nostrum odit rerum id consequuntur et dolore, quas ut, repellat quia sunt delectus vel doloremque sit incidunt, libero omnis. Eos quis saepe ipsum.</div>
\t \t \t \t <div>Sit officiis, porro quam laboriosam quaerat provident assumenda suscipit, quod nulla praesentium expedita, quos eligendi corporis veritatis illo dolorem ipsam quidem earum! Optio neque odio, voluptatem. Asperiores possimus voluptas similique!</div>
\t \t \t \t <div>Repellat rem veniam expedita accusamus animi necessitatibus dolore explicabo esse provident eligendi at quo cupiditate beatae voluptatem delectus sit hic recusandae ab mollitia reprehenderit soluta perspiciatis, incidunt ipsam, eveniet. Eum.</div>
\t \t \t \t <div>Eos ipsum ducimus nemo tempora molestias ea voluptas possimus sit laudantium temporibus eveniet quod at aut deserunt minus reiciendis sint corporis accusantium, facere doloribus et, fugit impedit. Nihil, tenetur, delectus.</div>
\t \t \t \t <div>Odit cupiditate iure sunt sit itaque quisquam, dolore cumque mollitia, animi libero in error, praesentium adipisci suscipit magnam consectetur a corrupti aperiam voluptatem nesciunt sed provident obcaecati recusandae! Culpa, voluptatibus!</div>
\t \t \t \t <div>Maiores ex dolor perferendis. Fugiat, nulla laborum illum, optio in totam sed vitae minima ex tempora. Veniam, nobis, similique. Doloribus molestias veniam enim distinctio tenetur sapiente, eius perspiciatis dolore sint.</div>
\t \t \t \t <div>Et hic corporis omnis, neque deleniti nulla pariatur dignissimos ad suscipit dolore maxime aut atque, labore cupiditate odio. Facilis, ex! Adipisci excepturi placeat sit quibusdam deserunt dolorem repellat laboriosam, quos.</div>
\t \t \t \t <div>Culpa nemo impedit ab nisi suscipit, corporis odio molestiae quidem cumque ad veniam eveniet reprehenderit provident minus, ipsa vitae autem quas, cupiditate quibusdam quisquam. Veniam aliquid quas recusandae aperiam distinctio.</div>
\t \t \t \t <div>Magni beatae quod mollitia cupiditate reprehenderit ratione aperiam quae, quasi animi esse neque laborum voluptatibus doloribus error consequuntur autem consectetur illum architecto, similique minima vitae cumque? Consequuntur quos, eveniet minus!</div>
\t \t \t \t <div>Ullam, possimus. In dignissimos odio libero reprehenderit nesciunt facilis dicta nisi recusandae quis esse similique, blanditiis maxime fuga atque id aliquam rerum molestiae, quasi architecto, vitae, soluta earum dolorum laborum.</div>
\t \t \t \t <div>Voluptate eaque repudiandae corporis unde facilis sunt repellendus quis, aliquid culpa provident dignissimos, minima quos placeat! Eos iusto quasi quo, quidem vero quos tempore, quibusdam, doloribus mollitia repellat dolorum reiciendis.</div>
\t \t \t \t <div>Officiis nisi ducimus quibusdam. Facilis obcaecati iste culpa id ullam quos reprehenderit laboriosam explicabo, quibusdam voluptatum, eius quam alias veniam dolorum, neque dolorem recusandae! Est obcaecati repellat eaque reiciendis. Suscipit.</div>
\t \t \t \t <div>Ullam, voluptatum facere quis enim, dolorum, neque excepturi earum ad sint, maiores obcaecati modi? Laboriosam repellendus dolor, aperiam voluptatem explicabo consequuntur, autem, nostrum, provident eveniet voluptatibus numquam minima nesciunt non.</div>
\t \t \t \t <div>Enim eum distinctio quis voluptas ea quisquam corrupti molestiae, cum id voluptate soluta, molestias provident. Voluptatibus enim, hic deserunt aut consequatur mollitia fuga error dignissimos magnam ea nobis excepturi recusandae.</div>
\t \t \t \t <div>Distinctio rem ab hic quo dolor aliquam, dolorum neque, saepe incidunt unde odit earum maxime officiis consequuntur quos natus commodi. Illo molestiae quo ipsa voluptas odit. Sunt incidunt soluta omnis!</div>
\t \t \t \t <div>Sit fuga maxime pariatur praesentium illo ducimus facere veniam molestias in illum doloribus ab quibusdam ipsa iusto sint officia, impedit, quae omnis, molestiae perspiciatis repellat beatae. Eaque quam iusto fuga.</div>
\t \t \t \t <div>Voluptatibus unde blanditiis veritatis, ipsa libero asperiores accusamus impedit laudantium doloremque. Reprehenderit similique, mollitia quam repudiandae libero totam doloribus sapiente molestiae officiis. Similique culpa, labore odit quae minus dignissimos, distinctio.</div>
\t \t \t </div>
\t \t </section>
\t \t <footer>
\t \t \t <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ducimus error, ut optio alias? Voluptas, explicabo. Exercitationem temporibus earum perferendis repellendus, tenetur corporis, iste cumque tempora odit atque porro modi?</div>
\t \t \t <div>Debitis sit sint tempore earum quasi impedit est neque vitae, deleniti dolorem, mollitia totam laborum! Praesentium officiis dolorum quibusdam impedit voluptate voluptatibus, vero quas mollitia, ex labore amet aperiam, consectetur.</div>
\t \t \t <div>Voluptas ducimus reprehenderit quae id deleniti rem fuga nostrum alias, tempore nemo ullam aspernatur autem distinctio dicta unde odio dolor dolores amet consequatur nisi quam, consectetur facilis. Ducimus, facilis, laudantium.</div>
\t \t </footer>
\t </section>div.content{
background: yellow;
height: 100%;
min-height: 100%;
overflow-y: auto; //not works!!
}
、より良い結果のための完全なページを行きます！ – user2024080