Question

Hello分组，

我已经尝试了很多，我查看了通过搜索找到的任何网站，但无法解决我的问题

我想要一个按钮，居中，它必须留在底部，并有固定的空间。所以它总是在任何页面的同一个地方。那不是问题。

但是当我的网站现在有更多的文字而不是屏幕尺寸;带滚动条的网站;按钮不在真正的底部，它在页面加载时保持在当前屏幕底部，也在文本上方。

我该如何解决这个问题？

我的代码就在眼前：

HTML:
<a href='departments.php'><img src='images/backwf.png' class='button'></a>

CSS:
.button {
width: 100px;
height: 100px;
position: absolute;
margin-right: 50%;
margin-left: 50%;
bottom: 20px;
}

我已经创建了一个jsfiddle来准确显示我的意思：https://jsfiddle.net/t5c6pspd/

Answer 1

将内容设置为固定min-height，因此当内容较短时，按钮将保持在底部。当内容长于屏幕时，按钮将保留在内容之下要使按钮居中，请将其display:block和margin: 20px auto

＆＃13;

.content {
  min-height: calc(100vh - 100px);
  width: 100%;
}

.footer {
  width: 100%;
}

button {
  display: block;
  padding: 5px 10px;
  margin: 20px auto;
}

＆＃13;

<div class="content">
  This is test text <br> This is test text <br> This is test text <br> This is test text <br> This is test text <br>
</div>
<div class="footer">
  <button>Test</button>
</div>

＆＃13;

Answer 2

您必须使用position: fixed。

Answer 3

尝试这样的事情：

<div id="container">
<div id="canvas"></div>
<div id="button"></div>
#canvas{
    border:1px solid black;
    position:relative;
        display:table;      
        top: 50%;
    left: 50%;
    margin-left:auto;
    margin-top: -320px;
}
#button{
   position:absolute; 
   margin-left:auto;

   width:150px;
   bottom:280px;
}
</div>

Answer 4

＆＃13;

button{
  width: 100px;
	height: 100px;
	position: fixed;
	bottom: 5%;
 margin-left: 40%;
margin-right: 40%


}

＆＃13;

test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>test test test test test test test test test test test test test test test test test test test test test test test<br>


<button>test</button>

＆＃13;

按钮到底但动态

4 个答案: