Html 使用 CSS 使用相对位置对齐屏幕底部的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17057997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS to align a button bottom of the screen using relative positions
提问by sharon Hwk
I need to position a button to the bottom of the screen. I need to use relative size and not absolute sizes, so it fits any screen size.
我需要在屏幕底部放置一个按钮。我需要使用相对尺寸而不是绝对尺寸，所以它适合任何屏幕尺寸。
my CSS code:
我的 CSS 代码：
position:relative;
left:20%;
right:20%;
bottom:5%;
top:60%;
回答by Praveen
The below css code always keep the button at the bottom of the page
下面的 css 代码始终将按钮保留在页面底部
position:absolute;
bottom:0;
Since you want to do it in relative positioning, you should go for margin-top:100%
既然你想在相对定位中做到这一点，你应该去margin-top:100%
position:relative;
margin-top:100%;
EDIT1:JSFiddle1
编辑 1：JSFiddle1
EDIT2:To place button at center of the screen,
EDIT2：要将按钮放置在屏幕中央，
position:relative;
left: 50%;
margin-top:50%;
回答by Chamika Sandamal
This will work for any resolution,
这适用于任何分辨率，
button{
position:absolute;
bottom: 5%;
right:20%;
}
回答by Prakash GPz
<button style="position: absolute; left: 20%; right: 20%; bottom: 5%;"> Button </button>
