CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 1849

Display scrollbars for overflown content only on parent container

What I am trying to achieve is to have only scrollbars on the div with overflow: auto. Why do I see additional vertical scrollbar on the body?

<div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

Upvotes: 1

Views: 38

Answers (2)

Simplicius
Simplicius

Reputation: 2095

By adding overflow: hidden to the parent you deactivate the scrollbars, also you additionally may add:

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

body {
  margin: 0;
}

This would work out like this:

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

body {
  margin: 0;
  overflow: hidden;
}
<div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

Upvotes: 2

KyleMit
KyleMit

Reputation: 30327

Remove the margin and padding from the document container like this:

html, body {
  margin: 0;
  padding: 0;
}


html, body {
  margin: 0;
  padding: 0;
}
<div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

Upvotes: 1

Related Questions