CODEWITHSUNDEEP
htmlcssscrollbar
user7030651
user7030651

Reputation:

CSS : start scroll bar from specific div

I am making a page in which header part is fixed , the center contents are scrolling. I want the header part to occupy whole page including scrollbar area , and I want the scroll bar to be appeared from below the header.

.bg-dark{
  background:#3a3f51;
}
.bg-dark-header{
  position:fixed;
  height: 60px;
  width: 100%;
  z-index:1000;
  top: 0;
  color:white;
}

.center_content{
  margin-top:40px;
  height:600px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="bg-dark bg-dark-header ">

  Header Text
</div>

<div class="center_content text-center">
Center Content
  Center ContentCenter ContentCenter ContentCenter ContentCenter Content
</div>

So , I want a scroll-bar from center-content div and the header part should occupy whole width.

Any help would be great.

Thank you.

Upvotes: 0

Views: 3271

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

You can use calc property, in you case .center_content{ height: calc(body height - header-height);}

.center_content {
  margin-top: 60px;
  height: calc(100vh - 60px);
  overflow: auto;
}


.bg-dark {
  background: #3a3f51;
}
.bg-dark-header {
  position: fixed;
  height: 60px;
  width: 100%;
  z-index: 1000;
  top: 0;
  color: white;
}
.center_content {
  margin-top: 60px;
  height: calc(100vh - 60px);
  overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="bg-dark bg-dark-header ">

  Header Text
</div>

<div class="center_content text-center">
  Center Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
  Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
  Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
  Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
  Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
  Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
  Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter Content
</div>

Upvotes: 1

webfussel
webfussel

Reputation: 116

Change you css to the following:

body {
  overflow: hidden;
}

.bg-dark{
  background:#3a3f51;
}
.bg-dark-header{
  position:fixed;
  height: 60px;
  width: 100%;
  z-index:1000;
  top: 0;
  color:white;
}

.center_content{
  margin-top:60px;
  height:600px;
  overflow-y: auto;
}

It removes the scroll bars of the whole page and adds bars to the .center_content.

I also corrected the margin-top of .center_content to match the height of the header.

Upvotes: 0

Related Questions