Question

这是我的代码：

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

我希望根据页面中显示的内容，我的页脚始终位于页面底部。我不想使用position：absolute因为某些页面有更多内容和位置：绝对只是让内容隐藏在页脚后面。

如何在没有位置的情况下将页脚始终保持在页面底部：绝对？或者有没有办法使用position：absolute但仍然根据显示的内容向下滚动页面

Answer 1

只需将页脚样式更改为：

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

Answer 2

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

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

Answer 3

申请职位：固定。而不是使用position：relative。你的问题将得到解决。

Answer 4

您可以将此代码用于固定位置：

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

如何保持页脚

4 个答案: