A Pen by kaushalya.

index.markdown

Hello, How are you dude?

May be you are wondering that why that crippy scrollbar comes when we add width: 100% to html(or body) element in css...

A simple Technique to fix is just add margin: 0 to that element.

Add below code:

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

And remember when you are applying height: 100% you should/must not apply margin-top property to the first element. Because when you apply it, Vertical-scrollbar will appear. You can apply padding-top property to the element instead of the margin-top property. ( It's different I know but can be a solution =) )

script.js

/*
 * Solution for a simple problem
 * Just I've known about it, so shared with you... =)
 * 
 * 
 * 2013 by KAUSHALYA MANDALIYA
 * http://seebeetee.com
 * https://twitter.com/kmandalwala
 */

Solution-for-a-simple-problem....markdown

Solution for a simple problem...

Before this Technique, I also wondered why this happening, but now I've found a solution.

A Pen by kaushalya on CodePen.

License.

style.css

html, body {
  width: 100%;  
  height: 100%;  
  margin: 0;  
  padding: 0;
  font-family: 'Roboto Slab', serif;
}
blockquote {
  margin: 0.3em;
  padding: 0.1em 0.5em;
  border-left: 0.4em solid #bbb;
  background: #e9e9e9;
  color: #555;
  font-size: 1.2em;
}
p, pre {
  margin: 0 0.3em;
  padding: 0.2em;
  font-size: 1.1em;
}
pre,code, pre code {
  background: #eee; 
  font-family: monospace, serif;
}
code {
  background: #dedede;
}