1

ページの下部から上にスライドするフローティング/固定パネルを含む Web ページを作成しました。このペイン内には、スクロールする必要があるコンテンツを含む子 div があります。に設定しoverflowましたがscroll、autoうまくいかないようです。パネル内のコンテンツを切り替えるために easytabs.js プラグインを使用していることに注意してください。これが、期待どおりに機能しない理由である可能性があると考えています。

こちらからページへのリンクを見つけることができます

誰かが見て、私が間違っていることを教えてもらえますか?

関連する CSS は次のとおりです。

#menu-tab {
    display: block;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #000;
    font-size: 20px;
    padding: 10px 15px;
    margin: 0 auto; 
    width: 250px;
    text-align: center;
    cursor: pointer;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#menu-content {
    display: none;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #111;
    /*padding: 30px 0;*/
    height: 1px;
    /*overflow: hidden;*/
}

/* Styles for Tabs on Side */
#tab-side-container { padding: 50px 0; }
#tab-side-container > ul { list-style: none; margin: 0 40px 0 0; padding: 5px 0; background: #f1f1f1; float: left; }
#tab-side-container > ul li { width: 200px; margin: 0; padding: 0; text-align: right; font-size: 28px; text-transform: uppercase; }
#tab-side-container > ul li a { display: block; padding: 11px 15px; outline: none; color: #000; }
#tab-side-container > ul li a:hover { text-decoration: underline; }
#tab-side-container > ul li.selected-tab { background: rgba(255, 255, 255, 0.95); position: relative; left: 1px; }
#tab-side-container > ul li:first-child.selected-tab { border-top: none; }
#tab-side-container > ul li a.selected-tab { text-decoration: none; }
#tab-side-container .panel-container { padding-top: 5px; padding-left: 240px; }

div.menu {
    overflow: auto;
}
4

9 に答える 9

5

#menu-content css オーバーフローを auto または scroll に変更するだけです。

于 2013-10-11T07:17:58.793 に答える
2

バディ、私はあなたのウェブサイトをチェックします、問題は CSS ファイルにありません。問題は isotope という名前の jQuery プラグインにあり、同位体はこのコードを挿入します:

   overflow: hidden;

.menu クラスの style 属性として、プラグインを適切に構成する必要があります。

このコードを置き換えて試すことができます：

$container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css'
});

このコードの場合:

 $container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css',
    containerStyle: {
        position: 'relative',
        overflow: 'auto'
    }
});

乾杯！

于 2013-10-12T03:07:43.497 に答える
0

これを試して。#menu-content{overflow:auto}または#menu-content{overflow:scroll}のいずれか

于 2013-10-17T03:55:47.783 に答える
0

基本的に、overflow:scroll が機能するには、div のコンテンツが div のサイズを超えている必要があります。コンテンツを大きくするか、div を小さくして、それがうまくいくかどうかを確認してください。また、div の "overflow:auto" は垂直方向のみにスクロールするように設定しますが、"overflow:scroll" は垂直方向と水平方向の両方にスクロールするように設定します。補足です。

于 2013-10-07T23:47:21.490 に答える
-1

css を次のように変更できます。

    #parent {
    overflow-y: scroll;
    width: 100%;
    }
    #box1 {
    width: 15%;
    float: left;
    }
    #box2 {
    width: 80%;
    float: right;
    }

これはあなたが求めていることを達成すると思います。

于 2013-10-17T21:43:28.540 に答える