limit contents within a div with a scrollbar exclusively for that content

Question

limit contents within a div with a scrollbar exclusively for that content

Within my project, I have a total of 5 different div sections: header, left dropdown menu, center content div, right menu guide, and bottom footer. I am looking to ensure that the center content div remains in the middle of the screen while allowing for dynamic content insertion without affecting the overall layout with unnecessary scrollbars. I would like only the content div to be able to contain a scrollbar. Can anyone offer advice or guidance on accomplishing this?

view image here

jquery html css

Answer 1

Answer №1

If you are looking for a fresh and modern take on CSS layouts, then you should definitely check out this code snippet. It utilizes the new CSS grid layout module, which allows you to create layouts that are independent of content and not tied to a specific flow. For more details, refer to the 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>

Answer 2

If you are looking for a fresh and modern take on CSS layouts, then you should definitely check out this code snippet. It utilizes the new CSS grid layout module, which allows you to create layouts that are independent of content and not tied to a specific flow. For more details, refer to the 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>

Answer 3

Answer №2

To achieve the desired outcome, make sure to include a max-height and overflow: auto in the CSS for the content division located at the center of the page.

Answer 4

To achieve the desired outcome, make sure to include a max-height and overflow: auto in the CSS for the content division located at the center of the page.

limit contents within a div with a scrollbar exclusively for that content

Answer №1

Answer №2

Similar questions

The issue with VS Code is that it is running the wrong file instead of

Leveraging jQuery's .when and .then methods allows for

Guide to automatically compressing images during the file upload process

The Navbar's expansion is being enhanced by non-collapsible items in the Boostrap 4 dropdown menu

Customizing Background Image in Internet Explorer 10 with JavaScript

Populate a dropdown menu in HTML using a PHP array

Choose every fourth row in the table

Tips for adding a class to an SVG when clicked

Issue "The only acceptable numeric escape in strict mode is '' for styled elements in Material-UI (MUI)"

What is the best method for clearing DOM variables and storage when a new innerHTML is loaded dynamically in a Single Page Application?

A New Approach to Initializing Web Pages in ASP.NET (with a Surprising Twist)

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

Numerous passcodes needed for easy access to secured webpage

utilizing for loop in jQuery

I am looking to display the precise text from an HTML file while maintaining the original formatting in a Flutter application

Troubleshooting Z-Index Problem in Internet Explorer 7 with CSS Dropdown

Tips for connecting an event to an object for resizing and clicking

Avoid duplicate IDs while concealing content with media query in CSS3

The 'refresh' function in jQM listview is causing issues with inset lists

What is the best way to horizontally align paragraphs within different divs or spans?