8

タイトルはほとんど質問をしますが、私は使用することを知っていoverflow-y: hiddenますoverflow-x: hidden。要素の上下または左側と乗り物側のいずれかを非表示にすることができますが、これらのセレクターを使用して片側のみを非表示にする方法があります。

特に、オーバーフローしているが上部ではないdivの下部を非表示にすることに興味があります。

そうでない場合、この望ましい効果を達成するための他のCSS唯一の方法はありますか？

これを必要とする正当な目的があり、これを行うための標準的な方法があるかどうかを確認したいと思います。

少し説明すると、私はスライドショーのCSSを制御しているだけであり、スライドショー内の要素をdiv上にプッシュする必要がありますが、これを行うとdiv、overflow: hidden値がプッシュされたこれをカットしますdiv。もちろん完全に削除することはできますoverflow: hiddenが、それではスライドショーはあまり良くありません。

フィドルは以下に含まれています：

https://jsfiddle.net/ejhyz7t3/

4

3 に答える 3

2

質問の例に基づく以下のjsfiddleは、以下を使用して下端のみを切り取るという望ましい効果を提供しますclip。

https://jsfiddle.net/ejhyz7t3/2/

完全なコードは、参照用に以下にコピーされています。

HTML

<div class="outer-container">
   <div class="inner-container">
   </div>
</div>

CSS

.outer-container {
  background: red;
  height: 100px;
  margin-top: 100px;
  width: 150px;
  padding-left: 50px;
}

.inner-container {
  background: green;
  height: 200px;
  width: 100px;
  transform: translateY(-50px);
  position: absolute;
  clip: rect(0, 100px, 150px, 0);
}
于 2017-07-25T17:40:47.377 に答える
0

ドラッグ可能なdivがあり、右上/左ではなく、右/下にオーバーフローしたいという同様の問題がありました。z-indexを調整して解決しました。コンテナdivからz-index：0px; z-index：500pxにドラッグ可能。上部と左側のdiv（メニュー）をz-index：1000px;に設定します。これはドラッグ可能なレイヤーを効果的に挟み、私が望む方向にオーバーフローすることを可能にしました。

于 2013-08-26T17:39:49.207 に答える
-1 
.mydiv {  
    clip: rect(-100px, -100px, auto, -100px);  
}

クリップの下部をクリップに設定すると、次のautoようoverflow: hiddenになります。値は、-100pxオーバーフローの余地を残すために任意に選択されます。

于 2015-11-09T12:21:17.853 に答える