0

I am new here so I dont know how its work. I am trying to resize div but its not resize inside parents properly Here what I am trying. Can you help me out. I want to resize blue div in full Parent div. I am not getting what I am missing in code. Thanks in advance.

    <html>
      <head>
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>JS Bin</title>
        <style type="text/css">
          * {
            margin: 0px;
            padding: 0px;
          }

          #Container {
            position: absolute;
            top: 0px;
            left: 264px;
            width: 312px;
            height: 512px;
            background-color: silver;
          }

          #Parent {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 0px;
            height: 0px;
          }

          #resizable {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 256px;
            height: 256px;
            background-color: blue;
          }
        </style>
      </head>
      <body>
        <div id="resizableContainer1" style="top: 6px; left: 0px; width: 256px; height: 512px; background-color: red;">
        </div>
        <div id="Container">
          <div id="Parent">
            <div id="resizable"></div>
          </div>
        </div>
      </body>
<script>
    $(document).ready(function() {
      $("#resizable").resizable({
        "containment": "#Container"
      });
    });</script>
    </html>
4

2 に答える 2