ホームページ >ウェブフロントエンド >htmlチュートリアル >div スクロール bar_html/css_WEB-ITnose について質問があります。

div スクロール bar_html/css_WEB-ITnose について質問があります。

WBOY
WBOYオリジナル
2016-06-24 11:39:561604ブラウズ

代码如下:
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    03fc48c6e8e131d94ca98b8e034341f4
    4e0acc4a468b953e95b6084941208f232cacc6d41bbb37262a98f745aa00fbf0
    b2386ffb911b14667cb8f0f91ea547a7CDOS Mail6e916e0f7d1e588d4f442bf645aedb2f
    46d5fe1c7617e3914f214aaf043f4ccf
        #outOne {
            width:30%;
            height:80%;
            background-color:gray;
            overflow:auto;
        }
        #innerOne {
            width:20%;
            height:20%;
            background-color:blue;
            overflow:auto;
        }
    531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    $(document).ready(function() {
        $(".newfolder").show();
        $(".rcvfold").click(function(){
                 $('.newfolder').slideToggle(500);
        })
    });
2cacc6d41bbb37262a98f745aa00fbf0
61bf34bdfed1f43af8364ca44ad55893
    2b31ad4653e75e68dc5aecf5fa83d17e欢迎新用户556c2c322c68b6e0f9414b7e606e9be472ac96585ae54b6ae11f849d2649d9e6c72c1af5e0e7f90179c047c5ef85885e
    f5e450e3490c6f491f20f57767b34860收件箱556c2c322c68b6e0f9414b7e606e9be472ac96585ae54b6ae11f849d2649d9e61faa8c67643450774912653a7864f7940ca7815e485429058ba314482e7502bf82e295699cff932a4d4dabba39074c35
    4d985482345ba6e7b1eab44769485c8d
        b47a148003b034b1cfe8e90284a060detest182e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest282e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest382e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest482e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest582e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest182e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest282e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest382e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest482e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest582e295699cff932a4d4dabba39074c35
        b47a148003b034b1cfe8e90284a060detest182e295699cff932a4d4dabba39074c35
    16b28748ea4df4d9c2150843fecfba68
31de59b41f0936c94f9c17e910693447testaaaa aasdasdasdsdas94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beetestaaaaaasdasdasdsdas94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

div 内に div を作成します。 外側の div には、内側の div のコンテンツを展開/縮小するためのボタンがあります。 本来、達成される効果は次のとおりです。 test1~4 の 4 行のコンテンツ、まだコンテンツがある場合は、スクロール バーが表示されます。

ここでの問題は、最初の文 8b05045a5be5764f313ed5b9168a17e6 を追加すると、スクロール バーが垂直方向に表示されないことです。内側の div ですが、水平方向には効果がありません。コンテンツが多すぎると、ページの一番下に移動してしまい、最初の文をログアウトすると表示されなくなります。8b05045a5be5764f313ed5b9168a17e6 、次に内側の div スクロール バーが表示されますが、ボタンをクリックして縮小すると、内側の div の内容は縮小しますが、境界線はまだそこにあります


ソリッドで 2 つの状況の組み合わせを変更する方法を教えてください線、つまり、ボタンをクリックして実線をプルダウンすると、スクロールバーが表示されます。もう一度 div ボタンをクリックして全体をプルアップします。ありがとうございます




ディスカッション (解決策) への返信

最初の文にコメントした後の拡張効果:

$(document).ready(function() {        $("#innerOne .newfolder").show();        $(".rcvfold").click(function(){                 $('#innerOne').slideToggle(500);        })    });

ここをこれに変更し、#innerOne の高さを固定高さに設定します

$(document).ready(function() {        $("#innerOne .newfolder").show();        $(".rcvfold").click(function(){                 $('#innerOne').slideToggle(500);        })    });

ここを次のように変更し、次に設定します#innerOne の高さを固定の高さにします


ありがとうございます

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。