如何删除页面上的滚动条

Question

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%;
}

Answer 1

body{
    overflow: hidden;
}

Vertical only:

body{
    overflow-y: hidden;
}

Horizontal only:

body{
    overflow-x: hidden;
}

Possible duplicate: Hiding the scrollbar on an HTML page

Answer 2

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

Here is your updated demo

Answer 3

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.

Answer 4

set overflow to hidden; this may solve it.