jquery - 仅在其上设置带有滚动条的内容 div

Question

我在元素中有 5 个 div，(标题、左侧下拉菜单、中心内容 div、右侧菜单指南、底部页脚)，我需要将这个 div 保持在中心，以便动态插入所有内容，不允许创建整个元素中的scrollbar，只有content div，可能包含scroll bar ..有人可以向我解释一下我该怎么做吗？

enter image description here

Answer 1

如果您想要一种现代方法来制作 CSS 布局，请检查此代码段。它使用新的 CSS 网格布局模块，允许您制作与内容无关且不基于流的布局。这里是Can i Use Reference

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>