页脚不会出现在页面底部

时间:2016-09-21 12:04:25

标签: html css footer

我开发了一个页面,其中页脚没有出现在页面底部,而不是在底部,页脚正好在标题之后。 我已经尝试了几乎所有选项,但我无法解决这个问题。

1 个答案:

答案 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 &copy; 2016 XYZcorp,Inc. All rights reserved </center>
		</div>
		</div>
		
		
	
	</div>

</body>

</html>