我需要帮助将页脚粘贴到页面的最底部。
我花了太长时间试图让我的页脚贴在我的网页底部。网上有很多告诉我如何去做，但没有一个奏效。我一定是做错了什么。无论如何，这是代码。这并不多。请告诉我我在这里做错了什么。提前致谢。
HTML:
<html>
<head>
<title>
Jim Bob - Online Portfolio
</title>
<!--CSS file-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<div id="titleScreen">
<table id="titleTable">
<tr>
<td>
<h1 id="title1">Jim Bob</h1>
</td>
</tr>
<tr>
<td>
<h1 id="title2"><span>ONLINE PORTFOLIO</span></h1>
</td>
</tr>
</table>
<img id="downArrow" src="downArrow.png">
</div>
<div id="MyWorkDiv">
<h3 id="myWorkTitle">My Work</h3>
<hr>
<img id="todayLogo" src="logoIcon.png">
<table id="todayTable">
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo genere perveniant ad extremum; Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Tu vero, inquam, ducas licet, si sequetur; Haec para/doca illi, nos admirabilia dicamus. Qua igitur re ab deo vincitur, si aeternitate non vincitur? Duo Reges: constructio interrete. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Tuo vero id quidem, inquam, arbitratu. Ille enim occurrentia nescio quae comminiscebatur; Hoc non est positum in nostra actione.</p>
</td>
<td>
<img id="todayImg" src="todayApp.png">
</td>
</tr>
</table>
<hr id="workBottomLine">
</div>
<div id="push">YOOOOOOOOOOOOOOOOOOOOOOOOO</div>
</div>
<div id="footer">
<h3 id="contactMe">Contact Me</h3>
<hr id="footerHr">
<table id="contactTable">
<tr>
<td>
<img id="emailImg" src="@.png">
</td>
<td id="myEmailTd" colspan="6">
<p id="myEmail">jimbob@gmail.com</p>
</td>
</tr>
<tr>
<td>
<img id="phoneImg" src="phone.png">
</td>
<td colspan="6">
<p id="myNumber" rowspan="6">my number here</p>
</td>
</tr>
<tr id="icons">
<td>
<img id="githubImg" src="github.png">
</td>
<td>
<img id="linkedinImg" src="linkedin.png">
</td>
<td>
<img id="dribbleImg" src="dribbble.png">
</td>
<td>
<img id="twitterImg" src="twitter.png">
</td>
<td>
<img id="instaImg" src="insta.png">
</td>
<td>
<img id="fbImg" src="fb.png">
</td>
<td>
<img id="googleplusImg" src="googleplus.png">
</td>
</tr>
</table>
</div>
</body>
<script src="script.js"></script>
</html>
CSS:
body {
background-image: url("alps.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#titleTable {
width: 60%;
height: 30%;
position: absolute;
margin-left: -30%;
/* half of width */
margin-top: -15%;
/* half of height */
top: 50%;
left: 50%;
}
#title1 {
font-family: 'Lobster';
font-size: 100px;
color: white;
text-align: center;
margin-bottom: 0px;
}
#title2 {
z-index: -999;
font-family: 'Roboto', sans-serif;
font-size: 35px;
color: white;
text-align: center;
margin-top: 0px;
overflow: hidden;
line-height: 2em;
}
/****** Title Lines On Side ******/
#title2 span {
display: inline-block;
position: relative;
}
#title2 span:before,
#title2 span:after {
content: "";
position: absolute;
height: 5px;
border-top: 3px solid;
top: 50%;
width: 73%;
}
#title2 span:before {
right: 100%;
margin-right: 15px;
}
#title2 span:after {
left: 100%;
margin-left: 15px;
}
/****** END OF Title Lines On Side ******/
#downArrow {
position: absolute;
margin-left: -37.5px;
/* half of width */
margin-top: -37.5px%;
/* half of height */
top: 85%;
left: 50%;
}
#myWorkDiv {
background-color: #1E2C55;
width: 100%;
position: absolute;
top: 100%;
padding-bottom: 50px;
margin-bottom: 20%;
}
#myWorkTitle {
font-family: 'Roboto', sans-serif;
font-size: 50px;
color: white;
text-align: left;
padding-top: 50px;
padding-left: 50px;
margin-bottom: 10;
}
hr {
color: white;
width: 92%;
margin-left: 50px;
margin-right: 50px;
}
#todayLogo {
padding-top: 30px;
padding-left: 50px;
padding-right: 50px;
}
#todayTable {
padding-top: 30px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
}
td {
vertical-align: top;
text-align: left;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 30;
}
#contactMe {
font-family: 'Roboto', sans-serif;
font-size: 50px;
color: white;
text-align: center;
padding-left: 50px;
margin-bottom: 0;
}
#contactTable {
align-content: center;
margin-left: 50px;
margin-right: 50px;
}
#contactTable {
padding-top: 30px;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
}
#contactTable td {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
}
#contactTable td p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
text-align: left;
color: #1E2C55;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
/* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -440px;
/* the bottom margin is the negative value of the footer's height */
}
#footer,
#push {
position: absolute;
height: 440px;
/* .push must be the same height as .footer */
}
最佳答案
要使元素具有粘性，您需要使用 position: fixed;(而不是 position: absolute;):
#footer
{
position: fixed;
bottom: 0;
}
关于html - 为什么我的页脚没有粘在页面底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29736600/