Question

我最近刚刚将JQuery手风琴效果添加到我的网站并应用了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" });
});

Answer 1

您可以通过添加以下内容来解决此问题：

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

这不是完美的解决方案，但它有效。

Answer 2

我找到了适合我的解决方案。

我刚添加了一个额外的div，使其边界比父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%;
}

JQuery：accordion heightStyle：fill导致垂直滚动条

2 个答案: