3

ページの真ん中に素敵な div があります。上部にメニュー div があります。左側に別の div があります。

div には余白があり、それらの間に素敵な溝があります。ここまでは順調ですね。

唯一の問題は、ページの中央にある div のコンテンツが大きくなると、スクロール バーが表示されることです (これは問題ありません)。出来ますか ？

+-----------+  ^   (see gap 20px between scrollbar and div)
|           |  |
|           |  | 
|           |  |
|           |  |
|           |  |
|           |  |
+-----------+
4

3 に答える 3

1

スクロールバー ( プロパティ) を持つ外側のコンテナーを作成し、overflow-y必要な背景を持つ小さなコンテンツ コンテナーを配置して、内側の要素と外側のスクロールバーの間のギャップがガターをシミュレートすることができます。

HTML

<div class="outer">
    <div class="inner">
       <!-- content goes here -->
    </div>
</div>

CSS

.outer {
  width:80%;
  height:150px;
  overflow-y:scroll;
}

.inner {
  width:95%;
  background:White;
}

デモ

width:95%をmargin-right値に置き換えることで、ガターの幅を固定することもできます。

margin-right:20px; /*20px gap between inner and scrollbar*/

デモ

background-clipプロパティ セットを使用して要素にcontent-box追加することで、単一の要素でこれを再現することもできpadding-rightます。

.content {
  width:80%;
  height:150px;
  overflow-y:scroll;
  background:white;
  background-clip: content-box;
  padding-right:40px;
}

デモ

ただし、このアプローチに対する IE<=8 のサポートはありません。また、padding値にはスクロールバーの幅を含める必要があります。そうしないと、非常に低いパディング値を使用すると、ガターがスクロールバーの下に隠れてしまいます。余分なパディングによってレイアウトが崩れる場合は、box-sizingプロパティを に設定して修正できますborder-box。

于 2013-02-25T11:20:23.653 に答える
0

このようなカスタムスクロールバーを使用してみてください。これにより、カスタマイズするオプションが増えます

于 2013-02-25T10:00:23.673 に答える
0

padding-right:20px;スクロールバーとコンテンツの間のスペースが 20px になるようにdiv が必要です。

見てみな

div
{
    overflow-y:auto;
    width:100px;
    height:100px;
    padding-right:20px;
}
于 2013-02-25T09:59:01.680 に答える