设置内容div仅带有滚动条

Question

我在项目中有5个div（页眉，左下拉菜单，中心内容div，右菜单指南，底部页脚），我需要将此div放在中间，以便动态插入所有内容，不允许在整个项目，仅内容div可能包含滚动条..有人可以向我解释我该怎么做吗？

在此处输入图片说明

Answer 1

在中间的内容div中添加max-height和overflow: auto将为您带来预期的结果。

Answer 2

如果您想采用现代方法进行CSS布局，请查看此代码段。 它使用新的CSS网格布局模块，该模块允许您进行内容不可知且不基于流程的布局。 我可以在这里使用参考

 body { overflow: hidden; } .AppShell { display: grid; height: 100vh; overflow: hidden; grid-template-rows: 4fr 20fr 4fr; grid-template-columns: 200px 10fr 200px; grid-template-areas: "header header header" "leftside content rightside" "footer footer footer"; } .Header { grid-area: header; background-color: powderblue; } .LeftSide { grid-area: leftside; background-color: sandybrown; } .Content { grid-area: content; background-color: mediumturquoise; overflow: auto; } .RightSide { grid-area: rightside; background-color: papayawhip; } .Footer { grid-area: footer; background-color: tomato; } 

 <main class="AppShell"> <section class="Header">Header</section> <section class="LeftSide">Left</section> <section class="Content"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ex excepturi veritatis dicta debitis repellendus illo, laboriosam corporis, nostrum ratione, voluptatem, accusantium est optio laborum soluta totam odit facere architecto.</div> <div>Debitis a, adipisci tempore error repudiandae labore assumenda natus modi illo alias impedit esse amet beatae culpa enim tenetur maxime ipsa fuga voluptatem nobis sint nulla optio soluta sit ad.</div> <div>Voluptatem officia asperiores dolores magnam perferendis praesentium, id, impedit facilis dignissimos enim, pariatur esse. Nam praesentium quam incidunt perspiciatis, consectetur vel, architecto quia reiciendis nobis vitae eligendi dolorum voluptatibus fugit?</div> <div>Alias dolor dicta incidunt laboriosam id accusamus nesciunt doloremque harum reprehenderit, in quo corrupti, obcaecati, aliquid pariatur totam ullam quia ab ratione ex nobis ut! Saepe ab eos deleniti adipisci.</div> <div>Quaerat, placeat dolorem rem, incidunt illum harum suscipit illo! Tempore hic deleniti perferendis a numquam recusandae minus quibusdam aperiam harum magnam excepturi reprehenderit, cum, voluptatibus similique, voluptatem sit temporibus accusantium!</div> <div>Molestiae consequuntur fugit voluptatum quasi illum quam animi quibusdam minima neque culpa, optio recusandae, ipsa est. Iure sunt, porro sequi. Ipsa dolor, obcaecati laborum nulla vitae? Eligendi, magnam labore vitae.</div> <div>Cum natus maiores, impedit ipsum expedita quo accusantium, aliquam nulla, ipsa quia eveniet eos ex. Beatae consectetur maiores cumque sapiente facilis, cum impedit quibusdam dicta consequatur odio, officiis temporibus facere.</div> <div>Excepturi ipsa eligendi dicta fuga laudantium dolorum cupiditate iste quo neque non maiores molestiae doloremque dignissimos, iure provident culpa cumque praesentium in assumenda beatae possimus vel. Eum quod, libero expedita?</div> <div>Mollitia fuga explicabo natus nobis, laborum itaque hic molestias atque, laboriosam, iste eos nemo vel sed asperiores! Neque dolore quo vel maxime exercitationem quod, sint. Similique delectus quo sit! Temporibus?</div> <div>Sunt sequi ducimus obcaecati perspiciatis ipsam, provident expedita qui unde nesciunt, est asperiores odio consequatur incidunt tempora adipisci iusto mollitia enim. Iste quaerat non, obcaecati, ea aliquid quasi quidem. Impedit?</div></section> <section class="RightSide">Right</section> <section class="Footer">Footer</section> </main>