2

最近、JQuery アコーディオン効果を自分のサイトに追加し、heightStyle: fill を適用して、ウィンドウ全体を埋めるようにしました。

ただし、余分な 1 ピクセルまたは 2 ピクセルのように見えるものがいっぱいになり、垂直スクロール バーが表示されるようになりました。余分なパディングが原因である可能性があるか、どこかにマージンがあると考えていますが、すべてを試してみましたが、余分なピクセルがどこから来ているのかわかりません。

皆さん、どこか分かりますか？ ページ全体を埋めるようにそれを取り除きたいだけですが、垂直スクロールバーは発生しません。

実際の例: 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

私は自分に合った解決策を見つけました。

追加の 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 に答える