我的问题是我的页脚没有定位在页面底部，就像我告诉它的那样。我不知道如何修复它，以及有关如何修复输入框的任何提示，以便当我输入它们时它们变成黑色而不是灰色。
<head>
<title>Website</title>
<link rel='stylesheet' type='text/css' href='./css/style.css'>
<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Baloo+Paaji" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id='banner'>
<div class='nav'>
<ul class="topnav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="right"><a href="#about">About</a></li>
</ul>
</div>
</div>
<div id='main'>
<input type="text" value="First Name" name="First Name" id="First Name" onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" />
<input type="text" value="Middle Name" name="Middle Name" id="Middle Name" onblur="if (this.value == '') {this.value = 'Middle Name';}" onfocus="if (this.value == 'Middle Name') {this.value = '';}" />
<input type="text" value="Last Name" name="Last Name" id="Last Name" onblur="if (this.value == '') {this.value = 'Last Name';}" onfocus="if (this.value == 'Last Name') {this.value = '';}" />
<br>
<input type="text" value="Email" name="Email" id="email" onblur="if (this.value == '') {this.value = 'Email';}" onfocus="if (this.value == 'Email') {this.value = '';}" />
<input type="text" value="Phone Number" name="Phone Number" id="Phone Number" onblur="if (this.value == '') {this.value = 'Phone Number';}" onfocus="if (this.value == 'Phone Number') {this.value = '';}" />
<br>
<input type="text" value="Country" name="Country" id="Country" onblur="if (this.value == '') {this.value = 'Phone Number';}" onfocus="if (this.value == 'Country') {this.value = '';}" />
<input type="text" value="Age" name="Age" id="Age" onblur="if (this.value == '') {this.value = 'Age';}" onfocus="if (this.value == 'Age') {this.value = '';}" />
<input type="text" value="Gender" name="Gender" id="Gender" onblur="if (this.value == '') {this.value = 'Gender';}" onfocus="if (this.value == 'Gender') {this.value = '';}" />
<br>
<input type="text" value="Message" name="Message" id="Message" onblur="if (this.value == '') {this.value = 'Message';}" onfocus="if (this.value == 'Message') {this.value = '';}" />
</div>
</body>
<body>
<div class='footer'>
<u><a href=''>Dawson Hudson</u>
</div>
</body>
</html>
Css
/*---------------------------------------Styles Everything---------------------------------------*/
*{
padding:0px;
margin: 0px;
}
body, html {
width: 100%;
height: 100%;
}
/*------------------------------------Makes The Page Flexible-------------------------------------*/
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li{
float: none;
}
ul.topnav li a {
font-size: 10pt;
}
}
/*===========================================Home Page============================================*/
/*------------------------------------------Banner Code-------------------------------------------*/
#banner {
width: 100%;
height: 570px;
background-image: url('../images/DH.png');
background-size: 100%;
background-repeat: no-repeat;
border-bottom: #333 solid 5px;
}
/*-------------------------------------------Link Code-------------------------------------------*/
ul.topnav {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
position: fixed;
padding-left: 10%;
z-index: 10;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 10px 30px;
text-decoration: none;
font-family: 'Baloo Paaji' ,cursive;
font-size: 20pt;
}
ul.topnav li a:hover {
background-color: #34B5E0;
}
ul.topnav li.right {
position: absolute;
padding-right: 7.5%;
right: 10.5%;
}
/*---------------------------------------Main Page Code---------------------------------------*/
#main {
width: 80%;
position: relative;
top: 100px;
left: 10%;
z-index: 1;
background-color: pink;
}
/*-------------------------------------------Row Code-------------------------------------------*/
.row {
width: 100%;
height: 40%;
background-image: url('../images/holder.jpg');
background-size: 100%;
background-repeat: no-repeat;
border: 2px black solid;
z-index: 2;
}
.rowText {
width: 40%;
height: 90%;
position: relative;
top: 5%;
right: 2.5%;
float: right;
}
.rowText button {
width: 30%;
height: 9%;
border-radius: 5px;
background: black;
border: none;
color: white;
font-family: 'bungee', cursive;
font-size: 15pt;
cursor: pointer;
}
.rowText button.Fb {
position: absolute;
bottom: 0%;
right: 0%;
background-image: url('../images/facebook.jpg');
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.7;
}
.rowText button.Pin {
position: absolute;
bottom: 0%;
right: 35%;
background-image: url('../images/pinterest.jpg');
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.7;
}
.rowText button.Tw {
position: absolute;
bottom: 0%;
left: 0;
background-image: url('../images/twitter.jpg');
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.7;
}
a button.tw:hover, button.Pin:hover, button.Fb:hover {
opacity: 1;
}
.rowText h1 {
color: rgba(255,255,255,0.7);
font-family: 'bungee', cursive;
font-size: 30pt;
position: absolute;
top: -20px;
left: 0px;
}
.rowText h2 {
color: rgba(255,255,255,0.5);
font-family: 'baloo paaji', cursive;
font-size: 15pt;
position: absolute;
top: 10%;
left: 0px;
}
.rowText h3 {
color: white;
font-family: 'baloo paaji', cursive;
font-size: 15pt;
position: absolute;
top: 20%;
left: 0px;
}
.footer { /*---------------------------------------------------Footer Code-----------------------------------------------------*/
background-image: url('../images/footer.png');
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 200px;
position: absolute;
bottom:0px;
}
.footer u{
font-size: 22px;
position: absolute;
bottom: 10px;
left: 10%;
}
.footer a:visited {
color: white;
}
.footer a:active{
color: #34B5E0;
}
.footer a:hover {
text-decoration: none;
color: grey;
cursor: pointer;
}
/*=========================================Contact Page==========================================*/
#main input {
height: 50px;
width: 20%;
font-family: 'baloo paaji', cursive;
font-size: 20pt;
text-align: center;
position: relative;
left: 20%;
color: grey;
margin-left: -4px;
}
#main input:active {
color: black;
}
#main input#email {
width: 40%;
}
#main input#Message {
width: 60%;
height: 400px;
text-align: left;
}
/*===========================================News Page===========================================*/
答案 0 :(得分：1)
您可以在bootstrap sticky footer docs
中找到答案查看页面的CSS，特别是 wrap id的样式（你应该包装 banner 和 main wrap div中的内容 - ＆gt; min-height：100％是关键
还注意 wrap div中的 push div（但是如果你使用它，还要添加 margin：0 auto -60px to wrap style）
这应该给出你想要的答案。
答案 1 :(得分：0)
至于你的第二个问题，我认为你的意思是你希望在该字段中有灰色提示，然后在开始输入时将文本变为黑色。开始键入时更改文本颜色的最简单方法是让onfocus添加一个使文本变黑的类，然后在必要时让onblur删除该类。
首先，您需要在样式中添加一个新类，将文本变为黑色。
.blacktext
{
color: black;
}
添加一个类很简单：
onfocus="this.className += ' blacktext'; if (this.value == 'First Name') {this.value = '';}"
删除需要一些字符串搜索：
onblur="if (this.value == '') {this.value = 'First Name'; this.className = this.className.replace(' blacktext', '');}"
请注意，如果当前值为“First Name”，您可能希望激活onblur，以便在您单击该字段并再次退出时不会保持黑色。