如何保持下来的页脚

这是我的代码：如何保持下来的页脚

html,body,ul,li { 
 
margin:0; 
 

 
} 
 

 

 
#container { 
 
padding-left:5px; 
 
height:100%; 
 
} 
 

 
#mainMenu { 
 
font-family:Arial, Times, sans-serif; 
 
list-style-type:none; 
 
padding-right:30px; 
 
    
 
} 
 

 
#mainMenu a { 
 
text-decoration:none; 
 
margin:5px; 
 
padding:2px; 
 
color:SeaGreen; 
 
font-weight:bold; 
 

 
} 
 

 
#mainMenu a:hover { 
 
color:Teal; 
 

 
} 
 

 
#menu { 
 
text-align:right; 
 
width:inherit; 
 
height:50px; 
 
background-color:paleGoldenRod; 
 
position:relative; 
 
left:0; 
 
top:0; 
 

 

 
} 
 
li { 
 
display:inline; 
 
} 
 

 

 
th, td { 
 
text-align:center; 
 
border:1px dashed grey; 
 
width:90px; 
 
height:40px; 
 
} 
 
.formText { 
 
margin:10px 0px; 
 
} 
 
footer { 
 
background-color:SlateGray; 
 
width:100%; 
 
height:100px; 
 
position:relative; 
 
bottom:0px; 
 
left:0px; 
 

 

 

 
}

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
    <title>Contact Me</title> 
 
    <link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 

 
    <body> 
 
    <div id="menu"> 
 
     <ul id="mainMenu"> 
 
\t  <li><a href="C:\Users\dan\Desktop\Table Generator Website\index.html">HOME</a></li> 
 
\t  <li><a href="C:\Users\dan\Desktop\Table Generator Website\About\index.html">ABOUT</a></li> 
 
\t  <li><a href="C:\Users\dan\Desktop\Table Generator Website\Contact\index.html">CONTACT ME</a></li> 
 
\t </ul> 
 
    </div> \t 
 
<div id="container"> \t 
 
    <h2>Contact Me Directly</h2> 
 
    
 
    <form> 
 
\t <label>Full Name:</label><br> <input type="text" name="name" class="formText"><br> 
 
\t <label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br> 
 
\t <datalist id="ageList"> 
 
\t <option value="18"> 
 
\t <option value="19"> 
 
\t <option value="20"> 
 
\t <option value="21"> 
 
\t <option value="22"> 
 
\t </datalist> 
 
\t <label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br> 
 
\t <label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br> 
 
\t <textarea></textarea> 
 
\t 
 
\t <input type="submit" value="Submit"> 
 
\t 
 
\t 
 
\t </form> 
 
\t </div> 
 
\t <footer> 
 
\t <p>This website </p> 
 
\t </footer> 
 
    
 
    </body> 
 

 
</html>

我想我的页脚根据页面上显示的内容永远是在页面的底部。我不想使用position：绝对的，因为一些页面有更多的内容和位置：绝对只是使内容隐藏在页脚的后面。

如何将页脚始终保留在页面底部而不显示位置：绝对？或者有什么方法可以使用position：absolute，但仍然会根据显示内容向下滚动

来源

2017-04-20 robert lee

'的位置是：固定;底部：0像素;' –

应用位置：固定在页脚上。

footer{position: fixed; background-color:SlateGray;width:100%;height:100px;bottom:0px;left:0px; 
}

来源

2017-04-20 20:17:58

只要改变页脚风格，这一点：

footer { 
     background-color:SlateGray; 
     height:100px; 
     position:fixed; 
     bottom:0; 
     left:0; 
     right:0; 
}

来源

2017-04-20 20:18:07

应用位置：固定的。而不是使用职位：亲戚。你的问题将得到解决。

来源

2017-04-20 20:20:19

您可以使用此代码固定的位置：

footer { 
    background-color: SlateGray; 
    bottom: 0; 
    height: 100px; 
    left: 0; 
    position: fixed; 
    width: 100%; 
}

来源

2017-04-21 03:51:53

如何保持下来的页脚

回答

相关问题