JQuery：accordion heightStyle：fill引起垂直滚动条

我刚刚在我的网站中添加了JQuery accordion影响并应用了heightStyle：fill，这样它就会填满整个窗口。JQuery：accordion heightStyle：fill引起垂直滚动条

但是，它正在填充看起来像一个额外的1px或2px，现在它导致垂直滚动条出现。我想我有额外的填充可能导致它，或某处的边际，但我已经尝试了一切，似乎无法弄清楚多余的像素来自哪里。

你们能弄清楚哪里？我只想摆脱它，以便它填充整个页面，但不会导致垂直滚动条。

活生生的例子：http://jsfiddle.net/r2Vra/（如果调整结果窗口中，您将需要重新运行）

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" }); 
});

来源

2013-11-15 Keven

我想出了一个适用于我的解决方案。

我刚刚添加了一个额外的div，并使其边界比父div小一点。

注意：不幸的是，我不得不添加一个额外的股利，所以如果任何人仍然知道一个替代方案，然后让我知道。

HTML：

<div id="palette"> 
     <div id="container"> 
      <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>

CSS：

#container { 
    height: 99.5%; 
}

来源

2013-11-28 17:51:26 Keven

您可以通过添加此解决这个问题：

#accordion .ui-accordion-content { 
    margin-bottom: -2px; 
}

这不是完美的解决方案，但它的工作原理。

来源

2013-11-15 01:23:36

嗯，尝试'边距：-4px'然后点击手风琴最后一个头。标题下面的div用这些额外的2px填充页面。你会注意到它跳跃。有些东西让我认为这是手风琴身体元素填充不正确。 – Keven

JQuery：accordion heightStyle：fill引起垂直滚动条

回答

相关问题