How do I make scrollbar only at div content and not at entire body?

Question

I have a navbar and a <div id='content'> . All of my content is in that div and when there's a lot of content, the scrollbar appears at the body (which pushes the navbar slightly to the side) instead of only inside the div. How do I make the scrollbar only inside the div?

I have tried setting overflow: 'hidden' for the body and overflow: 'scroll' for #content selector but it's not working.

Here's the code I have for testing

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    crossorigin="anonymous">
  <title>Document</title>
  <style>
    body {
      overflow: 'hidden';
    }

    #content {
      background-color: gray;
      overflow: 'scroll';
      height: '100%'
    }

  </style>
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
        </ul>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </div>
    </div>
  </nav>
  <div id="content">
    <div class="card mx-auto mb-5" style="width: 18rem;">
      <div class=" card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Content
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <div class="card mx-auto mb-5" style="width: 18rem;">
      <div class=" card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Content
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <div class="card mx-auto mb-5" style="width: 18rem;">
      <div class=" card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Content
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <div class="card mx-auto mb-5" style="width: 18rem;">
      <div class=" card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Content
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <div class="card mx-auto mb-5" style="width: 18rem;">
      <div class=" card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Content
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
</body>

</html>

Answer 1

Do your styling like this. I have restricted the body and html to 100% height, which would not make the body scroll and for the children i have used flex styling which aligns the content as per the parent height(assume 800px) giving your navbar 60px(assume) and content 740px. I added overflow on the content which makes the content scroll.

 html, body { height: 100%; } body { display: flex; flex-direction: column; } #content { background-color: gray; overflow: auto; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> </ul> <button class="btn btn-outline-success" type="submit">Search</button> </div> </div> </nav> <div id="content"> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>

Here is the sandbox

How do I make scrollbar only at div content and not at entire body?

Question

1 answers

solution1
1 ACCPTED 2021-07-07 22:17:42

How do I make scrollbar only at div content and not at entire body?

Question

1 answers

solution1 1 ACCPTED 2021-07-07 22:17:42

solution1
1 ACCPTED 2021-07-07 22:17:42