CODEWITHSUNDEEP
htmlcss
gusti
gusti

Reputation: 543

CSS Make scrollbar take its own space without overlaying the content of the page

I have a fixed toolbar having the buttons btn1, btn2, btn3 (the toolbar is set to display: flex, justify-content: space-between and position: fixed), but unfortunately when the content of the page is too long that makes the scrollbar to appear, the scrollbar overrides a part of btn3. What should I do to make the scrollbar take its own space when it appears? Or make the toolbar automatically stretch a bit to leave some space for the scrollbar?

Without scrollbar Without scrollbar

With scrollbarWith scrollbar (the three dots are behind the scrollbar)

.Toolbar {
  height: 65px;
  background-color: rgb(48, 48, 48);
  color: white;
  width: 100vw;
  position: fixed;
  box-shadow: 0px 2px 6px -2px rgb(138, 138, 138);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.WholePage {
   height: 1000px;
}
<div class="WholePage">
  <header class="Toolbar">
    <div>btn1</div>
    <div>btn2</div>
    <nav>btn3</nav>
  </header>
</div>

Upvotes: 2

Views: 1054

Answers (2)

Tony Tin Nguyen
Tony Tin Nguyen

Reputation: 345

I think your issue could come from the the box-sizing.

Try box sizing: box-sizing: border-box; for those buttons. I add .btn as my example for those three buttons.

.btn {
 box-sizing: border-box;
}

For the detail of the box-sizing, please check it as https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#box_sizes_with_content-box_and_border-box.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.toolbar {
  background-color: rgb(48, 48, 48);
  color: white;
  box-shadow: 0px 2px 6px -2px rgb(138, 138, 138);
  height: 100px;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toolbar div {
  display: flex;
  border: 1px solid red;
}

.whole-page {
  height: 2000px;
}
<div class="whole-page">
  <header class="toolbar">
    <div>btn1</div>
    <div>btn2</div>
    <div>btn3</div>
  </header>
</div>

Upvotes: 0

isherwood
isherwood

Reputation: 61073

Forcing the width to 100vw pushes it behind the scrollbar. Use 100% instead.

.Toolbar {
  height: 65px;
  background-color: rgb(48, 48, 48);
  color: white;
  width: 100%;
  position: fixed;
  box-shadow: 0px 2px 6px -2px rgb(138, 138, 138);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.WholePage {
  height: 1000px;
}

header>* {
  border: 2px solid pink;
  padding: 3px;
}
<div class="WholePage">
  <header class="Toolbar">
    <div>btn1</div>
    <div>btn2</div>
    <nav>btn3</nav>
  </header>
</div>

Upvotes: 2

Related Questions