CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Blaze Mathew
Blaze Mathew

Reputation: 55

How to achieve fixed full height divs with scrollbar in bootstrap

I am building a page in bootstrap with three columns whose height should be 100% and with each having scrollbars and body not having a scrollbar. Like this my sample site

So far my code is

<main role="main" class="container">
    <div class="row">
        <div class="col-md-3 ">
            Navigation Area <br />
        </div>
        <div class="col-md-6">
            Content Area <br />
        </div>
        <div class="col-md-3">
            Profile Area <br />
        </div>
    </div>
</main>

I haven't added any extra css. How do I achieve this?

Upvotes: 0

Views: 55

Answers (2)

Nisharg Shah
Nisharg Shah

Reputation: 19632

Remove body scrollbar

For removing scrollbar, use overflow: hidden

body {
    overflow-y: hidden;
}

Each col part have scrollbar

For add scrollbar, use overflow: scroll

main div[class*="col-"] {
    overflow-y: scroll;
}

Achieve full height

For that you need to use height: 100vh and remove your navbar height from that, Default bootstrap navbar height is 116px (with include padding).

main {
    height: calc(100vh - 116px);
}

Live Snippet for you

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<style>
    body {
        overflow-y: hidden;
    }
    main div[class*="col-"] {
        overflow-y: scroll;
        height: 100vh;
    }
</style>

<main role="main" class="container-fluid">
    <div class="row">
        <div class="col-md-3 ">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
        </div>
        <div class="col-md-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
        </div>
        <div class="col-md-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ut reiciendis temporibus consequatur voluptatum adipisci velit modi expedita eaque, id perspiciatis facilis laudantium aliquam quam quo molestiae tempore est soluta.
        </div>
    </div>
</main>

Upvotes: 1

Sai Manoj
Sai Manoj

Reputation: 3859

Make position relative for parent-main and absolute for child-settings elements. Apply overflow: auto;height:100% to the child elements to overflow. And as nisharg mentioned you can remove the height of the navbar from the page by using height: calc(100vh - "nav-height")

.main {
  position: relative;
  width: 100%;
  height: 100vh;
}

.settings {
  overflow: auto;
  height: 100%;
  width: 100%
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <div class="main">
          <div class="container settings" style="position: absolute;">
            <div class="box no-box-small-mobile">
              <div class="column">
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
                <h1>test</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="main">
          <div class="container settings" style="position: absolute;">
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions