Home >Web Front-end >HTML Tutorial >I have a question about the div scroll bar_html/css_WEB-ITnose

I have a question about the div scroll bar_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:39:561731browse

代码如下:
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
; e388a4556c0f65e1904146cc1a846beetestaaaaaasdasdasdasdsdas94b3e26ee717c64999d7867364b1b4a3
>
e388a4556c0f65e1904146cc1a846beetestaaaaaasdasdasdasdsdas94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Create a div inside a div, outside There is a button in the layer div. Click it to expand/retract the content of the inner layer div. The original effect is: if the inner layer div is set to a certain size, if it can display 4 lines of content test1~4, a scroll bar will appear if there is still content. .

The current problem is that if you add the first sentence 8b05045a5be5764f313ed5b9168a17e6, the scroll bar will not appear in the vertical direction of the inner div, but it will not affect the horizontal direction. If there is too much content, it will You can’t view it when you go to the bottom of the page.

If you log out the first sentence 8b05045a5be5764f313ed5b9168a17e6, the scroll bar can appear in the inner div, but when you click to shrink, the content of the inner div shrinks but the border remains


Please tell me how to modify the combination of the two situations of solid line, that is, click the button to pull down the solid line, and then the scroll bar will appear, click the button again and the div will pull up as a whole, thank you

Reply to discussion (solution)

Expand the effect after commenting on the first sentence:


Change it here to this, and then you Set the height of #innerOne to a fixed height

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

You change it like this here, and then you set the height of #innerOne to a fixed height

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

Thank you very much
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn