我是 CSS 的新手，正在开发一个将在 Android 浏览器中显示的简单模板。基本上我的模板只有两个元素，一条错误消息和一个按钮(应该放在页脚处)。 我在 stackoverflow 上阅读了一些帖子。人们建议使用
position:fixed;
bottom: 0;
在页脚处放置一个元素。但是，当我添加这个我的按钮 css 时，我的按钮似乎只是放在错误消息的正下方，而不是在页脚处。任何人有任何想法为什么？
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>
最佳答案
将 position: relative; 更改为 position: fixed; 来自类 .fulfill-application-button.ok
代码:
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
注意:如果需要，您可以将 right 和 left 设为相同。
关于javascript - Android 浏览器中的页脚按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38713804/