<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我有一个非常奇怪的 css 定位问题。我需要的是一个可滚动的居中 div 底部的固定按钮。在 Sceenshot 上，您将看到结果应该是什么样子。我试过位置:固定。但是该按钮将显示在整个站点上。但它应该在宽度为 100% 的 div 内。
我是真的，你能给我举个例子吗!
向所有支持者致以诚挚的问候和感谢。
最佳答案
我最近做了这样的事
fiddle :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>希望这对您有所帮助!
关于css - 修复了相对可滚动内容中的按钮位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35326453/