Question

我有一个非常奇怪的CSS定位问题。我需要的是一个可滚动的居中div底部的固定按钮。在Sceenshot上你会看到结果应该是什么样子。我尝试了位置：固定。但是按钮将显示在整个站点上。但它应该在宽度为100％的div内。

我真的如何向我展示一个例子！

亲切的问候并感谢所有支持者。

Screenshot

Answer 1

我最近做了类似的事

小提琴：https://jsfiddle.net/rtxxkjak/

它涉及一个外部div，然后是一个内部div，它包含你想要滚动的内容。然后该按钮固定在内容div的底部

片段:(身高可能有问题）

.top {
  height: 340px;
  width: 340px;
}

.container{
  background: red;
  overflow: scroll;
  max-height: 90%;
  max-width: 100%;
}

#button{
  z-index: 4;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  height: 100px;
  background: blue;
  margin-bottom: 10px;
  color: white;
}

button {
  display: block;
  width: 100%;
  background: black;
  height: 10%;
  color: white;
}

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div class="top">

<div class="container">
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
                
  </ul>
</div>
  <button id="button" type="submit">Submit</button>

</div>

希望这有帮助！

修复了相对可滚动内容中的Button Postition

1 个答案: