CODEWITHSUNDEEP
javascriptjqueryhtmlcss
0x3C
0x3C

Reputation: 5

How to remove scroll bar on page

Working on a webpage that has one "div" which is aligned as center. I went through a bunch of methods to try and get it working the way that I want it to, and finally found the closest one. I have a working demo over here

FIDDLE

My only problem with it right now is that even when the content doesn't take up the whole content of the page, it still adds a scroll bar. I'm wondering if there's anyway to remove that? I believe it has to do with the jQuery method of centering the "div".

Javascript:

$(function() {
  jQuery.fn.center = function() {
    this.css("position", "fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
  }

  $('#myDiv').center();
  $(window).resize(function() {
    $('#myDiv').center();
  });
});

CSS

* {
  margin: 0;
  padding: 10px;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Josefin Sans';
  text-align: center;
}

p {
  font-size: 18px;
  margin: 0 0 0.5em;
}

.centered-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.centered {
  background: #ccc;
  border-radius: 8px;
  margin: 0 auto;
  padding: 20px;
  width: 85%;
}

Upvotes: 0

Views: 1660

Answers (4)

Kamil Zajac
Kamil Zajac

Reputation: 219

Setting overflow to hidden may solve the scrollbar not appear but in that case it may not be fully vertically centered.

Instead you can not set padding on all elements, like you do with

* {
  margin: 0;
  padding: 10px;
}

It makes your body element and .content-wrapper to have extra padding of 10px that adds to its height and makes the scrollbar appear, if you set this padding to 0 the scrollbar disapears, check on your fiddle.

So for your example you could set your css like

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

p, h1, h2, h3, h4, span, br, hr {
  margin: 0px;
  padding: 10px;
} 

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Josefin Sans';
  text-align: center;
}

p {
  font-size: 18px;
  margin: 0 0 0.5em;
}

.centered-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.centered {
  background: #ccc;
  border-radius: 8px;
  margin: 0 auto;
  padding: 20px;
  width: 85%;
}

/*
Button
*/

.btn {
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: black;
  font-size: 18px;
  background: #ccc;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  outline: none;
}

.btn:hover {
  background: #bbb;
  text-decoration: none;
  }

In that case scrollbar won't appear.

Instead of setting margins and paddings on all elements with * use something like css style reset. Google for it. Then apply padding only on those elements you really need.

Upvotes: 0

andy
andy

Reputation: 65

set overflow to hidden; this may solve it.

Upvotes: 0

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34180

html,
body {
  position: fixed;
  top:00;
  left:0;
  bottom:0;
  right:0;
}

Here is your updated demo

Upvotes: 0

Hodrobond
Hodrobond

Reputation: 1696

body{
    overflow: hidden;
}

Vertical only:

body{
    overflow-y: hidden;
}

Horizontal only:

body{
    overflow-x: hidden;
}

Possible duplicate: Hiding the scrollbar on an HTML page

Upvotes: 1

Related Questions