Question

我在div中有一个表单，我将div中的提交按钮带到屏幕的另一部分。这很好用。但是，我想将该div锁定到特定的大小和相对位置并使用overflow：auto所以当它变得太大时（表单中的元素被隐藏的复选框），整个屏幕不会滚动，只有div。问题是，只要我添加溢出样式，我移出div的提交框就会被隐藏。我假设这是因为溢出所有元素被锁定到该div和滚动条允许您访问它们，但在这种情况下元素向左移动：-500px它甚至没有给我一个滚动条向左滚动到看他们。基本代码如下：

<div class="div1">
 <div class="div2">
  <form>
   <input type="submit" class="sub1" />
  </form>
 </div>
</div>`

CSS将是：

div.div1 {
 position:relative;
 width:1000px;
 margin: 0 auto;
}
div.div2 {
 width:500px;
 height:500px;
 position:absolute;
 top:125px;
 left:500px;
}
input[type=submit].sub1 {
 position:absolute;
 left: -500px;
}

这样可行，但只要我将div2 css更改为：

div.div2 {
 width:500px;
 height:500px;
 position:absolute;
 top:125px;
 left:500px;
 overflow:auto;
}

提交按钮消失。

我的问题：有没有办法获得滚动条并将div2容器保持在500px高而不会丢失div之外的元素？

Answer 1

如果我理解正确，您可以在div2内移动form，并将提交按钮保留在div2之外。这样，提交按钮将始终可见，div2可能会溢出。

<div class="div1">
  <form>
    <div class="div2">
      <!-- form fields go here -->
    </div>
    <input type="submit" class="sub1" />
  </form>
</div>

注意：您可能需要调整按钮上的样式，但我不完全确定您的最终目标。

css溢出，元素移到div之外，元素消失

1 个答案: