Question

我看到了一些类似的问题，但是并没有真正解决我遇到的问题。我已经看了2天，尝试了很多事情，但没有成功。

基本上，我想要的是一个搜索屏幕，该屏幕可以使用固定位置和正确：0的手柄调整大小；顶：0;底部：0;并覆盖我的其他身体元素。（其工作方式与广告一样。）输入搜索信息时出现问题。我希望我的“ SearchWindow”处于最小宽度，直到输入搜索为止。优选地，我希望脚本将div的大小自动调整为300px，从而显示其内容。当我这样做时，它将占据左侧位置并将其用作0点，并将其从左边缘向右延伸300 px。因此，如果div为150像素（因此其左边缘为右：150像素），则它将div延伸超过视口150像素以达到300像素的大小。我的第一个念头是如何获取size属性以移动左墙，但找不到任何信息。然后我想：“好吧，我将把div并在调整大小后移动它。”并尝试：

if($('#SearchWindow').width()<300){
    var x=(300-$('#SearchWindow').width());
    $('#SearchWindow').width(300);
    var win = document.getElementById('SearchWindow');
    win.translate('-' + x + 'px');
};

我看到了多种方法来实现这个想法，但似乎没有一个起作用，我假设我键入了错误的内容，或者使用了不正确的翻译功能，因此没有激活翻译。然后，我想也许我可以自己使用javascript拖放句柄，并且充满了关于如何创建已经可以工作的可调整div的更多基本问题。

完成此操作后，我想创建一个按钮，以将div的大小调整为最小宽度或300px，具体取决于其当前状态，但是如果我无法以有用的方式调整div的大小，则显然无法使用。

我不知道为什么它似乎不在乎“权利：0！重要；”我敢肯定，我忽略了一些小事情，并且/或者试图做一些超出我的经验所允许的事情。因此，无需再费心的代码了：

相关CSS：

#SearchWindow{
border: 1px solid #6a3f6c;
position:fixed;
top:0;
bottom:0;
right:0 !important;
height: 100vh;
min-width: 5px;
background-color:#ffffff;
max-width:calc(100vw - 25px);
z-index:200;
}

#SearchTab{
position:relative;
height:36px;
width: 20px;
margin-left:-19px;
left:-2px;
top:50vh;
color: #6a3f6c;
border-left: 1px solid;
border-bottom: 1px solid;
border-top: 1px solid;
border-color: #6a3f6c;
background-color:#ffffff;
border-top-left-radius:10px;
border-bottom-left-radius: 10px;
z-index: 200;
padding-top:14px;
z-index:350;
overflow: scroll;
};

#SearchResults{
margin-top:40px;
background: #ffffff;
position:fixed;
z-index:250;
};

AAAANNND相关html：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<body>
<div id='SearchWindow' class="resizable" >
    <div id='SearchTab' class="ui-resizable-handle ui-resizable-w">
        &#x25c0;
    </div>
    <div id="SearchResults"></div>
</div>
</body>

如果需要更多信息，我会很乐意透露。我真的不在乎是否需要将其废弃并从头开始重写它。我曾考虑过将div移到左墙，但是我比我想承认的更加固执。另外，您永远都不会坚持自己所学的知识。

在此先感谢所有回答/评论的人。

Answer 1

我通过将左侧位置移动到“ calc（100％-300px）”，然后调整其大小来解决此问题。我仍然会对更正确的解决方案感兴趣，但这暂时可以使用

可调整大小的div脚本调整大小将div推到视口之外

1 个答案: