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引起垂直滾動條

回答

相關問題