2

我最近刚刚将 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" });
});
4

2 回答 2

0

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

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

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

于 2013-11-15T01:23:36.510 回答
0

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

我刚刚添加了一个额外的 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%;
}
于 2013-11-28T17:51:26.513 回答