如何在引导程序中使用滚动条实现固定的全高div

Question

我正在使用三根列在Bootstrap中构建页面，其高度应为100％，每一列都具有滚动条，主体没有滚动条。像这样

到目前为止，我的代码是

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

我没有添加任何额外的CSS。我该如何实现？

Answer 1

  

删除正文滚动条

要删除滚动条，请使用overflow: hidden

body {
    overflow-y: hidden;
}

  

每个col部分都有滚动条

要添加滚动条，请使用overflow: scroll

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

  

达到全高

为此，您需要使用height: 100vh并从中删除导航栏高度，Default引导导航栏高度为116px（包括填充）。

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

为您提供的实时摘录

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

Answer 2

为parent-main和absolute元素设置相对位置。将child-settings应用于子元素以溢出。正如nisharg所述，您可以使用overflow: auto;height:100%

从页面上删除导航栏的高度

height: calc(100vh - "nav-height")

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

.settings {
  overflow: auto;
  height: 100%;
  width: 100%
}