Question

我在项目中有5个div，（标题，左下拉菜单，中心内容div，右侧菜单指南，底部页脚），我需要将此div保留在中心，以便动态插入所有内容，不允许在整个项目中创建滚动条，只有内容div，可能包含滚动条.. 有人可以向我解释我怎么能这样做，拜托？

enter image description here

Answer 1

添加max-height＆amp; overflow: auto到中间的内容div会给你带来预期的结果。

Answer 2

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

仅使用滚动条设置内容div

2 个答案: