CODEWITHSUNDEEP
htmlcss
100Toby1
100Toby1

Reputation: 25

My website has a scroll bar no matter how far I zoom out of it

My website is here: http://doggo.info

No matter how far I zoom out, even if I make the window far taller than the elements of the screen, it still shows a scroll bar. I think it might be because of my CSS, which is here:

html,body {
  height: 100%;
}

* {
    -moz-box-sizing: border-box;
}

body {
  background-color: #ededed;
  color: #424242;
  margin: 0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.428571429;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:normal;line-height:1.1;color:#333}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small{font-weight:normal;line-height:1}
h1,.h1{font-size:48px;line-height:52px}
h2,.h2{font-size:36px;line-height:42px}
h3,.h3{font-size:28px;line-height:36px}
h4,.h4{font-size:24px;line-height:25px}
h5,.h5{font-size:20px;line-height:24px}
h6,.h6{font-size:18px;line-height:24px}

h1, p {
  font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

a {
  color:#3282e6;
  text-decoration: none;
}
a:hover, a:focus {
  color:#165db5;
  text-decoration:underline;
}
.row:before, .row:after {
  display: table;
  content: " ";
}

.text-center{text-align:center}

.container {
  margin-left:  auto;
  margin-right:  auto;
  margin-top: 177px;
  max-width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
}

@media screen and (max-width:768px)
{
  .container {
    margin-left:  auto;
    margin-right:  auto;
    margin-top: 60px;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

#footer {position: relative; z-index: 10; height: 3em; margin-top: -3em; background-color: #EEEEEE}
html, body, .container { height: 100%;}
body > .container { height: auto; min-height: 100%; }

Sorry if I'm doing anything really stupid, I'm a noob with this stuff.

Upvotes: 0

Views: 102

Answers (2)

Rahul
Rahul

Reputation: 518

You need to replace the margin-top:177px with padding-top:177px in container div.

Don't get it? I'm talking about this.

Replace this:

.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 177px;
    margin-bottom: 30px;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
}

with this:

.container {
    margin-left: auto;
    margin-right: auto;
    padding-top: 177px;
    margin-bottom: 30px;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
}

Upvotes: 0

Aziz
Aziz

Reputation: 7793

  1. Add html, body { margin: 0; padding: 0; }

  2. Remove min-height: 100% from body > .container

That should fix your issues.

When you have a container that is at least 100% of viewport followed by a 3em high footer, you will always have a scrollbar!

Upvotes: 1

Related Questions