jquery ui 可调整大小并带有可拖动错误

Question

我试图让 div“子”在 div“父”内可拖动和调整大小并包含在其中。
问题是，当我调整我的 div 孩子的大小时，它被我的 div 父级中的某些东西挡住了。
如果您尝试将其宽度调整到最大，您就会明白。
如果我删除可拖动选项，问题就会消失。

这是一个你可以看到问题的小提琴：
JSFIDDLE

CSS

html, body, div { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; line-height:100%;}

.page_container{ width: 100%; height: 100%; position: relative; display: }
.main{ width: 800px; display: block; float: left; padding: 20px;}

.menu{ width: 200px; height: 700px; display: block; float: left; background-color: gray;}
.menu a{ color: black;}
.menu a:hover{ color: white;}

#parent{ width: 800px; height: 600px; display: block; border: solid 1px gray; padding: 0px;}
#child{ width: 100px; height: 100px;  display: block; border: solid 2px gray; cursor: move;}

HTML

<div class="menu">
    <ul>Templates
        <li><a href="template_add.php">Criar Novo</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Listar Templates</a></li>
    </ul>
    <ul>Slides
        <li><a href="#">Criar Novo</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Listar Slides</a></li>
    </ul>
    <ul>Slideshows
        <li><a href="#">Criar Novo</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Listar Slideshows</a></li>
    </ul>
</div>
<div class="page_container">
    <?php include 'includes/menu.php' ?>
    <div class="main">
        <div id="parent">
            <div id="child"></div>
        </div>
    </div>
</div>

JQUERY

$(function() {
$( "#child" ).resizable({ containment: "#parent", maxHeight: 600, maxWidth: 800, minHeight: 10, minWidth: 10 });
$( "#child" ).draggable({ containment: "#parent", scroll: true });

});

如果我删除我的 div“菜单”，问题就解决了，但是，当我将 with 和 height 调整为最大值时，右上角和底部仍有 1px 的边距。

Answer 1

问题在于您的 CSS 和浮动。我评论了浮动，它工作正常。

.menu{ width: 200px; height: 700px; display: block; /*float: left;*/ background-color: gray;}

如果你想要浮动，你也可以让高度“自动设置”。高度为 700px 是否有原因？

.menu{ width: 200px; /*height: 700px;*/ display: block; float: left; background-color: gray;}

也摆脱掉：

display:

http://jsfiddle.net/alutz33/btrP3/

此链接包含与寄宿问题有关的新请求：

http://jsfiddle.net/alutz33/rz4qw/