使用Jquery响应并重新调整两个div的大小

时间：2015-12-07 11:38:56

标签： jquery html css

我有一个像这个代码段的页面。 LeftCol是一个可以调整大小的div。使用LeftCol和RightCol div必须设置重新调整浏览器的大小。

我有两个问题：

  1. 如果我滚动LeftCol，则重新调整尺寸不起作用。

  2. 当我将浏览器的宽度更改为 696px 附近时，RightCol位于LeftCol的底部：

    3. enter image description here

    请问你能帮帮我吗？

    $(document).ready(function () {
            //resize
            $("#LeftCol").resizable({
                maxHeight: 250,
                maxWidth: ($("#parent").width() * 2) / 3,
                minHeight: 150,
                minWidth: 200
            });

            $('#LeftCol').resize(function () {
                $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
            });
            $(window).resize(function () {
                $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
                $('#LeftCol').height($("#parent").height());
            });
        });
    body {
            margin: 0;
        }

        #header {
            background-color: red;
            height: 100px;
            position: fixed;
            top: 0;
            width: 100%;
        }

        #parent {
            position: fixed;
            top: 110px;
            bottom: 110px;
            /*background-color: #00fffe;*/
            width: 99%;
            right: 0;
            left: 0;
            margin-right: auto;
            margin-left: auto;
        }

        #LeftCol {
            height: 100%;
            width: 20%;
            max-width:80%;
            float: left;
            background-color: #C7C5C5;
            overflow: auto;
        }

        #RightCol {
            height: 100%;
            background-color:rgb(224, 223, 223) ;
            width: auto;
            overflow: auto;
            direction:ltr;
        }

        .wrapper {
            direction:rtl;
            padding:10px;
        }

        #footer {
            background-color: red;
            height: 100px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    <link href="http://kaminet.ir/ss/jquery-ui.css" rel="stylesheet"/>
<link href="http://kaminet.ir/ss/bootstrap-rtl.css" rel="stylesheet"/>
<script src="http://kaminet.ir/ss/jquery-2.1.3.min.js"></script>
<script src="http://kaminet.ir/ss/jquery-ui.js"></script>
<script src="http://kaminet.ir/ss/jquery.ui.touch-punch.min.js"></script>
<section id="content">
            <div id="header">
            </div>

            <div id="parent" class="container">

                <div id="LeftCol">
                    <div class="wrapper">
                        start
                        <br>
                        salam salam salam salam salam salam salam salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        end
                    </div>
                </div>
                <div id="RightCol">
                    <div class="wrapper">
                        start
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam

                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        end
                    </div>
                </div>
            </div>

            <div id="footer">
            </div>
        </section>

1 个答案:

答案 0 :(得分：1)

你的元素更大，因为scrollWidth。试试这个

<强>更新

我将包装类分开，并将overflow:hidden添加到leftcol，并将overflow:auto添加到leftcol中的包装。

请现在试试，工作正常

$(document).ready(function () {
            //resize
            $("#LeftCol").resizable({
                maxHeight: 250,
                maxWidth: ($("#parent").width() * 2) / 3,
                minHeight: 150,
                minWidth: 200
            });

            $('#LeftCol').resize(function () {
                $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
            });
            $(window).resize(function () {
                $('#RightCol').width($("#parent").width() - $("#LeftCol").width()-1);
                $('#LeftCol').height($("#parent").height());
            });
        });
body {
                margin: 0;
            }

            #header {
                background-color: red;
                height: 100px;
                position: fixed;
                top: 0;
                width: 100%;
            }

            #parent {
                position: fixed;
                top: 110px;
                bottom: 110px;
                /*background-color: #00fffe;*/
                width: 99%;
                right: 0;
                left: 0;
                margin-right: auto;
                margin-left: auto;
            }

            #LeftCol {
                height: 100%;
                width: 20%;
                max-width:80%;
                float: left;
                background-color: #C7C5C5;
                overflow: hidden;
            }

            #RightCol {
                height: 100%;
                background-color:rgb(224, 223, 223) ;
                width: auto;
                overflow: auto;
                direction:ltr;
            }

         #LeftCol  .wrapper {
                direction:rtl;
                padding:10px;
              height:100%;
              overflow:auto;
            }

           #RightCol  .wrapper {
                direction:rtl;
                padding:10px;
            }

            #footer {
                background-color: red;
                height: 100px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }
<link href="http://kaminet.ir/ss/jquery-ui.css" rel="stylesheet"/>
<link href="http://kaminet.ir/ss/bootstrap-rtl.css" rel="stylesheet"/>
<script src="http://kaminet.ir/ss/jquery-2.1.3.min.js"></script>
<script src="http://kaminet.ir/ss/jquery-ui.js"></script>
<script src="http://kaminet.ir/ss/jquery.ui.touch-punch.min.js"></script>
<section id="content">
            <div id="header">
            </div>

            <div id="parent" class="container">

                <div id="LeftCol">
                    <div class="wrapper">
                        start
                        <br>
                        salam salam salam salam salam salam salam salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        end
                    </div>
                </div>
                <div id="RightCol">
                    <div class="wrapper">
                        start
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam

                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        salam
                        <br>
                        end
                    </div>
                </div>
            </div>

            <div id="footer">
            </div>
        </section>

JSFiddle：http://jsfiddle.net/r8hhjs37/1/

相关问题
最新问题