个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
这是我的代码:
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 只是让内容隐藏在页脚后面。
如果没有 position:absolute，如何让页脚始终位于页面底部？或者有没有办法使用 position:absolute 但仍然让页面根据显示的内容向下滚动
最佳答案
只需将页脚样式更改为:
footer {
background-color:SlateGray;
height:100px;
position:fixed;
bottom:0;
left:0;
right:0;
}
关于html - 如何保持页脚向下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43528996/
25
4
0
我是一名优秀的程序员,十分优秀！