Html 底部带有水平线的页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30770658/
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
footer at the bottom with horizontal line
提问by user3089927
I am trying to put footer at the bottom with a horizontal line just above the footer. But I am not even able to get footer at the bottom. Tried many posts and blogs but I am missing out on something. I am using the base of some blog to create the signup page.
我试图将页脚放在底部，在页脚上方有一条水平线。但我什至无法在底部获得页脚。尝试了很多帖子和博客，但我错过了一些东西。我正在使用一些博客的基础来创建注册页面。
html
html
<div id="header">
</div>
<div id="main">
<div id="container">
<form action="index.html" method="post">
<p id="form_title" style='color:#808080'>Create an Account</p>
<fieldset>
<legend style="color:#585858">Get started with Your Profile</legend>
<label for="name" style='color:#808080;font-size:14px'>CUSTOM NAME</label>
<input type="text" id="name" name="user_name" style="color:#404040">
<label for="type" style='color:#808080;font-size:14px'>TYPE</label>
<select id="sel-type" name="type">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</select>
<label for="type" style='color:#808080;font-size:14px'>REGION</label>
<select id="sel-region" name="region">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</select>
</fieldset>
<button type="submit">Create Profile</button>
</form>
</div>
</div>
<div id="footer">
<a href="About">About</a>
<a href="info.com">Instructions</a>
<a href="tt.com">Encountered an issue?</a>
</div>
css
css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato';
background-color: #E8E8E8;
}
#header {
width:100%;
background-color: #27272D;
height: 50px ;
border:1px solid;
position:relative;
}
#main{
border:1px solid;
width:100%;
height:100%;
}
#container{
margin-top: 100px;
border:1px;
}
form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
border-radius: 3px;
background-color: white;
border:1px;
}
#form_title {
margin: 10px 0 30px 15px;
font-size:20px;
}
input[type="text"],
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 20px;
}
input[type="text"]{
border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
height:44px;
font-size: 14px;
}
select {
padding: 6px;
height: 44px;
border-radius: 2px;
}
button {
color: #FFF;
background-color: #13ABAF;
font-size: 14px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 96%;
height:44px;
border: 1px solid;
border-width: 1px 1px 3px;
margin-bottom: 10px;
margin-left: 10px;
}
fieldset {
border: none;
}
legend {
font-size: 17px;
margin-bottom: 24px;
}
label {
display: block;
margin-bottom: 8px;
}
label.light {
font-weight: 300;
display: inline;
}
#horizontal-line{
display: block;
margin-top:100px;
margin-bottom: 60px;
width:96%;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
#footer {
position : absolute;
bottom : 0;
height:60px;
margin-top : 40px;
text-align: center ;
font-size: 10px ;
font-family: 'Lato' ;
}
@media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}
采纳答案by lmgonzalves
Remove the position: absolutein your style:
删除position: absolute你的风格：
#footer {
position: absolute;
/* ... */
}
FIDDLE: https://jsfiddle.net/lmgonzalves/750h2crz/2/
小提琴：https://jsfiddle.net/lmgonzalves/750h2crz/2/
回答by mding5692
For your css, try
对于您的 css，请尝试
#footer {
position: relative;
...
}
Also for the horizontal line just use
同样对于水平线，只需使用
<hr>
html tag above footer
页脚上方的html标签
(sorry about that, my editing looks awkward because stackoverflow prints out a horizontal line whenever I use that tag)
（抱歉，我的编辑看起来很尴尬，因为每当我使用该标签时，stackoverflow 都会打印出一条水平线）
Also its more simple and if you want minimal changes to css.
它也更简单，如果你想对 css 进行最小的更改。
回答by fix
put this in your css, and use a border instead of a horizontal line.
把它放在你的 css 中，并使用边框而不是水平线。
footer {
position: absolute;
bottom: 0;
height: 60px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #FFF;
}
回答by Yoel Nunez
updated your css with
用
#footer {
position:fixed;
width:100%; /* fill the whole width of the screen */
border-top:1px solid #aaa; /* you can change to whatever color you want */
padding-top:10px; /* add some spacing between line and links/text */
background:#fff; /* this is important otherwise your background will be transparent, change the color based on your needs */
/* ... your other properties */
}
Also updated you body styling with some padding at the bottom to offset the footer
还更新了您的身体造型，底部有一些填充以抵消页脚
body {
/* ... your other properties */
padding-bottom:65px;
}
回答by Limitless
I would simply use separate tag for footer sec and use Horizontal Rule tag
我会简单地使用单独的标签作为页脚秒并使用水平规则标签
<div id="footer">
<hr>
<footer>
<a href="About">About</a>
<a href="info.com">Instructions</a>
<a href="tt.com">Encountered an issue?</a>
<footer>
</div>
Thx
谢谢
