Question

我已经有一个页脚，页脚的表现很好，我将同一个css复制到我的联系页面，现在页脚悬挂在导航栏上方，我已经尝试了很多东西一天，但对于我的生活，不能把它放到最底层。我不想修剪页脚，我已经尝试了clear:both以及其他许多东西我正在寻找一个纯粹的css解决方案来解决我的问题：

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

只需将bottom: 0;添加到您的#footer CSS即可。

它已经有position: absolute但您没有为其指定位置这就是为什么它在顶部

修改

在小提琴中，我注意到你的代码有很多问题，这里有一些：

您在身体前打开容器div，之后关闭它。

你的身体没有身高，因为<html>是0px高。制作<html> height: 100%

您的#parent div只有position: relative，当我更改此内容时，整个页面都不合适。

当您执行所有这些操作，然后将bottom: 0;添加到#footer时，它会起作用（但仍然不好）。

您应该对所有这些进行排序，我强烈建议您谷歌如何使用float: left;构建一个html网页，如果不需要，则停止使用position。
在这种情况下，此页面不太可能保存。
祝你好运;）

我的页脚挂在顶部

1 个答案: