I recently integrated the JQuery accordion effect into my website and specified the heightStyle: fill so that it would occupy the entire window.
However, it seems to be taking up an additional 1 or 2 pixels, causing the vertical scroll bar to appear. I suspect there might be extra padding or margin causing this, but despite trying everything, I am unable to pinpoint the source of these extra pixels.
Any ideas on where this is coming from? I just want it to expand to fill the whole page without triggering the vertical scrollbar.
Live Example: http://jsfiddle.net/r2Vra/ (You will need to re-run if you resize the result window)
HTML:
<body>
<div id="palette">
<div id="accordion">
<h3>Upper Case</h3>
<div id="upperCase"></div>
<h3>Lower Case</h3>
<div id="lowerCase"></div>
<h3>Numbers</h3>
<div id="numbers"></div>
<h3>Punctuation</h3>
<div id="punctuation"></div>
</div>
</div>
<div id="canvas">
<div id="trash"><a href="#"></a></div>
</div>
</body>
CSS:
/****************************************************************************************
* GENERAL
*****************************************************************************************/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/****************************************************************************************
* PALETTE
*****************************************************************************************/
#palette {
float: left;
width: 320px;
height: 100%;
background-color: #888;
padding: 0 5px;
background: url(../img/texture.png) repeat;
}
#palette .letter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
/****************************************************************************************
* CANVAS
*****************************************************************************************/
#canvas {
margin-left: 320px;
height: 100%;
z-index: 0;
background: url(../img/refrigerator.jpg) no-repeat center center fixed;
background-position: left 200px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#canvas .newLetter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4.4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
#trash {
position:fixed;
right:0;
bottom:10px;
z-index: 100;
}
#trash a{
display: block;
background: url(../img/trashcan-sprite-tiny2.png) no-repeat;
height: 110px;
width: 125px;
}
#trash a:hover{
background-position: 0px -113px;
}
#trash img {
border: none;
}
/****************************************************************************************
* JQUERY UI CSS OVERRIDE
*****************************************************************************************/
#accordion .ui-accordion-content {
padding: 0 .5em;
}
/*
.ui-helper-reset {
line-height: 1.2;
}
.ui-widget {
font-size: 1em;
} */
JavaScript:
$(function() {
$( "#accordion" ).accordion({ heightStyle: "fill" });
});