25

私はこのSO投稿を読みました: css overflow-x visible and overflow-y hidden cause scroll bar.

また、私は経験しました: http://www.brunildo.org/test/Overflowxy2.html

私は次のように何かを達成したい:

オーバーフロー

次のコードを使用しようとしたとき：

overflow-x: hidden;
overflow-y: visible;

次のような結果
オーバーフロー 2
が表示されます。スクロールバーを表示したくありません。

Jqueryには解決策がありますか?

4

3 に答える 3

8

次のような CSS でこれを行うことができます。

HTML:

<div class="wrapper">
    <div class="inner">
    </div>
</div>

CSS:

.wrapper{
    width: 400px;
    height: 300px;
}
.inner{
    max-width: 100%;
    overflow-x: hidden;
}

.wrapperこれでdiv が作成されますが、ラッパー div の最大幅が 100% であるため、div がオーバーフローすることはありませんoverflow: visible;。.innerラッパーには、明示的に定義された幅が必要であることに注意してください。

ここに動作するjsFiddleがあります

于 2013-04-12T12:27:19.810 に答える
2

あなたが達成しようとしていることはcssでは不可能であり、overflowこれを達成することはできません. 代わりに、jquery を使用して、投稿された画像/画像に示したように出力を取得できます。

次のようなものが必要かどうかわかりません。

$('.horiz').width($('.container').width());

は水平バーで、その幅を要素を保持する.horizの幅に設定します。.container

HTML マークアップ

<div class='container'>
    <div class='horiz'></div>
    <div class='vert'></div>
</div>

CSS:

 .container {
    width:320px;
    height:320px;
    border:solid 5px green;
 }
 .horiz{
    width:500px;
    height:30px;
    background:red;
 }
 .vert{
    width:30px;
    height:500px;
    background:yellow;
    position:absolute;
    left:0;
    top:30px;
 }

jQuery:

$(function(){
   $('.horiz').width($('.container').width());
});

そしてそれの出力：

出力を確認する

于 2013-04-12T12:20:50.947 に答える