html - 我的页脚悬在顶部-6ren

html - 我的页脚悬在顶部

转载作者：太空宇宙更新时间：2023-11-04 03:27:58

我已经有一个主页，页脚表现良好，我将相同的 css 复制到我的联系页面，现在页脚悬在导航栏上方，我已经尝试了很多东西以获得更好的部分一天，但对于我的生活无法深入了解。我不想修复页脚，我已经尝试过 clear:both，以及许多其他的东西我正在寻找解决我的问题的纯 css 解决方案:

@import url(http://fonts.googleapis.com/css?family=Special+Elite);
/*font-family: 'Special Elite', cursive;*/
@import url(http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic);
/*font-family: 'Marvel', sans-serif;*/
#container {
	min-height:100%;
	position:relative;
	margin:0 auto -80px;
}
body {
	height:100%;
}
#background {
	background-image:url('css.jpg');
	background-position:center fixed;
	background-size:cover;
	background-attachment:fixed;
}
.navbar {
	position:fixed;
	width:100%;
	z-index:1;
	margin-top:10px;
}
ul {
	text-align:center;
	background-color:#7A4909;
}
li {
	list-style:none;
	margin-right:1em;
	font-family:'Special Elite', cursive;
	font-size:35px;
	padding:12px;
	display:inline-block;
}
li a {
	color:#D0903C;
	background-color:#7A4909;
	text-decoration:none;
	display:inline-block;
}
.left a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(-10deg) scale(1.2);
	   -moz-transform:rotate(-10deg) scale(1.2);
	     -o-transform:rotate(-10deg) scale(1.2);
	text-transform:uppercase;
}
.right a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(10deg) scale(1.2);
	   -moz-transform:rotate(10deg) scale(1.2);
	     -o-transform:rotate(10deg) scale(1.2);
	text-transform:uppercase;
}
#parent {
	position:relative;
}
#child {
	position:absolute;
	top:50%;
	left:50%;
	height:30%;
	width:50%;
	margin:15% 0 0 -25%;
}
.basic-grey {
    margin-left:auto;
    margin-right:auto;
    max-width: 500px;
    background: #F7F7F7;
    padding: 25px 15px 25px 10px;
    font: 12px 'Special Elite', cursive;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #E4E4E4;
}
.basic-grey h1 {
    font-size: 25px;
    padding: 0px 0px 10px 40px;
    display: block;
    border-bottom:1px solid #E4E4E4;
    margin: -10px -15px 30px -10px;;
    color: #888;
}
.basic-grey h1>span {
    display: block;
    font-size: 15px;
	font-family:'Marvel', sans-serif;
}
.basic-grey label {
    display: block;
    margin: 0px;
}
.basic-grey label>span {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
    border: 1px solid #DADADA;
    color: #888;
    height: 30px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    width: 70%;
    font-size: 12px;
    line-height:15px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
    padding: 5px 3px 3px 5px;
}
.basic-grey select {
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 70%;
    height: 35px;
    line-height: 25px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey .button {
    background: #7A4909;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #D0903C;
    box-shadow: 1px 1px 5px #B6B6B6;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #9E3F3F;
    cursor: pointer;
	font-family:'Special Elite', cursive;
	font-size:15px;
}
.basic-grey .button:hover {
    background: #D0903C;
	text-transform:uppercase;
	color:#7A4909;
}
#footer {
	height:80px;
	width:100%;
	background-color:#7A4909;
	position:absolute;
}

<html>
	<head>
		<meta charset="utf-8">
		<title>Contact Me!</title>
		<link media="screen" type="text/css" rel="stylesheet" href="contact.css"/>
	</head>
	<div id="container">
	<body id="background">
		<ul class="navbar">
			<li class="left"><a href="home.html">Home</a></li>
			<li class="right"><a href="contact.html">Contact Me</a></li>
			<li class="left"><a href="blog.html">Blog</a></li>
			<li class="right"><a href="funny.html">Funny</a></li>
		</ul>
		<div id="parent">
			<div id="child">
			<form action="mailto:barker.caitlin.e@gmail.com" method="post" class="basic-grey">
				<h1>Contact Form
					<span>Please fill out all fields.</span>
				</h1>
				<label>
					<span>Your Name :</span>
					<input id="name" type="text" name="name" placeholder="Your Full Name" />
				</label>
   
				<label>
					<span>Your Email :</span>
					<input id="email" type="email" name="email" placeholder="Valid Email Address" />
				</label>
   
				<label>
					<span>Message :</span>
					<textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
				</label>
				<label>
					<span>Subject :</span><select name="selection">
					<option value="General Question">General Question</option>
					<option value="About Me">About Me</option>
					<option value="Request">Request</option>
					</select>
				</label>    
				<label>
					<span>&nbsp;</span>
					<input type="button" class="button" value="Send" />
				</label>    
			</form>
			</div>
			</div>
		<div id="footer"></div> <!--end footer div-->
	</body>
	</div> <!--end container div-->
</html>