我开发了一个页面，其中页脚没有出现在页面底部，而不是在底部，页脚正好在标题之后。 我已经尝试了几乎所有选项，但我无法解决这个问题。
答案 0 :(得分：2)
所有这些绝对的立场并没有真正帮助。请尝试相对位置 - 请参阅我的代码段。
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: -25%;
position: relative;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
clear:both;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<a href="index.html" class="standard-logo"><img src="images/sequreone-logo.png" alt="Secqureone Logo"></a>
</div><!-- #logo end -->
</header>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ol>
<li>
<h3>Does Your Business have IT Security Policies and Procedures?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>Does Your Business follow one or more of these Standards/Compliance regulations ?</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) PCI</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) HIPAA</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) FISMA</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) GLBA</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) SOX</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) ISO 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label> <input type="text"/>
</div>
</li>
<li>
<h3>Does Your Business have a Backup and Recovery Plan?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>Does Your Business have end-point anti-virus protection in all desktops and laptops?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>Does Your Business perform regular patch management to keep servers, desktops, laptops up-to-date?</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
<h3>Is Your Business email system protected against spam,phising and other email threats ?</h3>
<div>
<input type="radio" name="question-6-answers" id="question-6-answers-A" value="A. Yes" required/>
<label for="question-6-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-6-answers" id="question-6-answers-B" value="B. No" required/>
<label for="question-6-answers-B">B) No</label>
</div>
</li>
<li>
<h3>How Frequently does your Business perform Vulnerability Assessment on your IT Insfrastructure & Networks?</h3>
<div>
<input type="radio" name="question-7-answers" id="question-7-answers-A" value="A. Every Month" required/>
<label for="question-7-answers-A">A) Every Month</label>
</div>
<div>
<input type="radio" name="question-7-answers" id="question-7-answers-B" value="B. Every 3 Month" required/>
<label for="question-7-answers-B">B) Every 3 Month</label>
</div>
<div>
<input type="radio" name="question-7-answers" id="question-7-answers-C" value="C. Every 6 Month" required/>
<label for="question-7-answers-C">C) Every 6 Month</label>
</div>
<div>
<input type="radio" name="question-7-answers" id="question-7-answers-D" value="D. Yearly" required/>
<label for="question-7-answers-D">D) Yearly </label>
</div>
<div>
<input type="radio" name="question-7-answers" id="question-7-answers-E" value="E. Never Done" required/>
<label for="question-7-answers-E">E) Never Done </label>
</div>
</li>
<li>
<h3>How Frequently does your Business perform Penetration Testing on your IT Insfrastructure & Networks?</h3>
<div>
<input type="radio" name="question-8-answers" id="question-8-answers-A" value="A. Every 3 Month" required/>
<label for="question-8-answers-A">A) Every 3 Month</label>
</div>
<div>
<input type="radio" name="question-8-answers" id="question-8-answers-B" value="B. Every 6 Month" required/>
<label for="question-8-answers-B">B) Every 6 Month</label>
</div>
<div>
<input type="radio" name="question-8-answers" id="question-8-answers-C" value="C. Yearly " required/>
<label for="question-8-answers-C">C) Yearly </label>
</div>
<div>
<input type="radio" name="question-8-answers" id="question-8-answers-D" value="D. Never Done" required/>
<label for="question-8-answers-D">D) Never Done</label>
</div>
</li>
<li>
<h3>How Frequently does your Business perform security scanning of your website?</h3>
<div>
<input type="radio" name="question-9-answers" id="question-9-answers-A" value="A. Every Month" required/>
<label for="question-9-answers-A">A) Every Month</label>
</div>
<div>
<input type="radio" name="question-9-answers" id="question-9-answers-B" value="B. Every 3 Month" required/>
<label for="question-9answers-A">B) Every 3 Month</label>
</div>
<div>
<input type="radio" name="question-9-answers" id="question-9-answers-C" value="C. Every 6 Month" required/>
<label for="question-9-answers-C">C) Every 6 Month</label>
</div>
<div>
<input type="radio" name="question-9-answers" id="question-9-answers-D" value="D. Yearly" required/>
<label for="question-9-answers-D">D) Yearly </label>
</div>
<div>
<input type="radio" name="question-9-answers" id="question-9-answers-E" value="E. Never Done" required/>
<label for="question-9-answers-E">E) Never Done</label>
</div>
</li>
<li>
<h3>How Frequently does your company perform a firewall audit?</h3>
<div>
<input type="radio" name="question-10-answers" id="question-10-answers-A" value="A. Every 3 Month" required/>
<label for="question-10-answers-A">A) Every 3 Month</label>
</div>
<div>
<input type="radio" name="question-10-answers" id="question-10-answers-B" value="B. Every 6 Month" required/>
<label for="question-10-answers-B">B) Every 6 Month</label>
</div>
<div>
<input type="radio" name="question-10-answers" id="question-10-answers-C" value="C. Yearly" required/>
<label for="question-10-answers-C">C) Yearly </label>
</div>
<div>
<input type="radio" name="question-10-answers" id="question-10-answers-D" value="D. Never Done" required/>
<label for="question-10-answers-D">D) Never Done</label>
</div>
</li>
<li>
<h3>Does your business have offsite storage of critical data backups?</h3>
<div>
<input type="radio" name="question-11-answers" id="question-11-answers-A" value="A. Yes" required/>
<label for="question-11-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-11-answers" id="question-11-answers-B" value="B. No" required/>
<label for="question-11-answers-B">B) No</label>
</div>
</li>
<li>
<h3>How Frequently does your company perform a Risk Assessment?</h3>
<div>
<input type="radio" name="question-12-answers" id="question-12-answers-A" value="A. Every 3 Month" required/>
<label for="question-12-answers-A">A) Every 3 Month</label>
</div>
<div>
<input type="radio" name="question-12-answers" id="question-12-answers-B" value="B. Every 6 Month" required/>
<label for="question-11-answers-B">B) Every 6 Month</label>
</div>
<div>
<input type="radio" name="question-12-answers" id="question-12-answers-C" value="C. Yearly" required/>
<label for="question-12-answers-C">C) Yearly </label>
</div>
<div>
<input type="radio" name="question-12-answers" id="question-12-answers-D" value="D. Never Done" required/>
<label for="question-12-answers-D">D) Never Done</label>
</div>
</li>
<li>
<h3>How Frequently does your company perform security audit of the cloud based application that you use?</h3>
<div>
<input type="radio" name="question-13-answers" id="question-13-answers-A" value="A. Every 3 Month" required/>
<label for="question-13-answers-A">A) Every 3 Month</label>
</div>
<div>
<input type="radio" name="question-13-answers" id="question-13-answers-B" value="B. Every 6 Month" required/>
<label for="question-13-answers-B">B) Every 6 Month</label>
</div>
<div>
<input type="radio" name="question-13-answers" id="question-13-answers-C" value="C. Yearly" required/>
<label for="question-13-answers-C">C) Yearly </label>
</div>
<div>
<input type="radio" name="question-13-answers" id="question-13-answers-D" value="D. Never Done" required/>
<label for="question-13-answers-D">D) Never Done</label>
</div>
</li>
</ol>
<div class="form-footer text-left">
<button type="submit" data-btntext-sending="Next" class="button btn-primary">Submit</button>
</div>
</form>
<div id="footer">
<center id="footer-center"> Copyright © 2016 XYZcorp,Inc. All rights reserved </center>
</div>
</div>
</div>
</body>
</html>