How do I remove the scroll bar on my page?

Question

So, on my website (can be found right here) the site allows me to scroll down, even though there is no content that can be revealed upon scrolling!

If you notice by looking at my site or by looking at my code, I have several style sheets that each control a separate background image and then fonts and colors to go with it. These files are essentially identical other than the colorization. In this example, I've only provided one of these files.

html, body, .do-you-even-flexbox {
    height:100%;
    width:100%;
    overflow-x:hidden;
}body {
    margin:0;
    font:normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
    text-align:center;
    background:#111 url('https://c4.staticflickr.com/4/3883/15331328401_f42b9bfcf5_h.jpg') center top/ cover;
} ::-moz-selection {
    background:#DFDF12;
    color:#fff;
}::selection {
    background:#DFDF12;
    color:#fff;
}a {
    text-decoration:none;
}a:hover, a:active {
    outline:none;
  text-decoration:underline;
}a:focus {
    outline:thin dotted;
}.do-you-even-flexbox, .container {
    position:relative;
    top:0;
    width:100%;
    height:100%;
}.container {
    padding:8px 20px 15px;
    display:flex;
    align-content:center;
}.box {
    height:20%;
    margin:auto
}h1 {
    font-family:"Roboto Slab", Helvetica, Arial, sans-serif;
    margin:0;
    color:#fff;
    font-weight:400;
    font-size:90px;
}h2 {
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    margin:0;
 color:#fff;
 font-weight:400;
 font-size:50px;
}.social {
 margin-top:30px;
}.social a {
 background-color:#F5F7FA;
 border-radius:35px;
 margin:0 3px;
 width:26px;
 height:26px;
 padding:16px;
 display:inline-block;
 -webkit-transition:background-color .6s ease;
 transition:background-color .6s ease;
}.social a:hover, .social a:focus {
 outline:none;
 background-color:#FC6E51;
}.icon {
 width:26px;
 height:26px;
}.icon>path {
 fill:#111;
}.links {
    color:#fff;
    margin-top:30px;
    font-size:20px;
}.links a {
    display:inline-block;
    padding:0 5px;
    color:#fff;
 font-size:20px;
}.links {
    color:#fff;
    font-size:20px;
}.links a:hover {
    color:#fff;
    font-size:20px;
}
@media (max-width: 660px) {
    h1 {
        font-size:64px;
    }h2 {
        font-size:24px;
    }
}
@media (max-width: 460px) {
    .do-you-even-flexbox {
        display:none;
    }.container {
        margin:0 auto;
        margin-top:4%;
    }.links a {
        display:block;
    }h1 {
        font-size:48px;
    }
    h2 {
        font-size:16px;
    }
}
@media (max-width: 350px) {
    h1 {
        font-size:40px;
    }
}

<!DOCTYPE html>
<html>
 <head>
        <!-- Bootstrap the fonts CSS -->
        <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
        <!-- Bootstrap the custom CSS -->
       <!-- <link rel="stylesheet" href="assets/css/index.css"> -->
       <!--<script>
   function chooseStyle() {
     var css = new Array('index', 'index_one', 'index_two','index_three', 'index_four', 'index_five');
      var i = Math.floor(Math.random()*css.length);
      var style = "assets/css/front/"+css[i]+".css";
  
      return style;
   }

   document.write('<link rel="stylesheet" href="'+chooseStyle()+'" type="text/css">');
  </script>-->
  <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>
 <body>
  <i class="do-you-even-flexbox"></i>
  <a href="javascript:history.go(0)"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-refresh-128.png" widt="64" height="64" alt="Refresh"></a>
  <div class="container">
   <div class="box">
    <h1>Hey There, I'm Brennan.</h1>
    <h2>This is my website, portfolio and blog.</h2>
    <div class="links">
     <a href="blog.html" title="My Blog">| Blog |</a>
     <a href="projects.html" title="My Projects">| Projects |</a>
     <a href="downloads.html" title="Download my stuff!">| Downloads |</a>
     <a href="ppages.html" title="Find dedicated pages for big projects!">| Project Pages |</a>
    </div>
   </div>
  </div>
 </body>
</html>

Any and all help is greatly appreciated!

THANKS!

It's because the `.container` height is 100% and the top `back` icon is outside of container. You could adjust container height or add this button inside div. — emmanuel, Oct 12 '14 at 17:40
If you remove padding from `.container` or add `box-sizing: border-box;` problem is getting fixed. — emmanuel, Oct 12 '14 at 17:42
possible duplicate of [Hiding the scrollbar on an HTML page](http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) — chresse, Oct 12 '14 at 17:48

score 1 · Accepted Answer · answered Oct 12 '14 at 17:45

Simple add overflow-y: hidden; in body:

body {
    margin: 0;
    font: normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
    text-align: center;
    background: #111 url('http://i.imgur.com/TX6Uk7p.jpg') center top/ cover;
    overflow-y: hidden;/*add this*/
}

How do I remove the scroll bar on my page?

1 Answers1