2016-09-21 16 views
0

Я разработал страницу, где нижний колонтитул не идет внизу страницы, а не внизу, нижний колонтитул подходит сразу после заголовка. Я пробовал почти все варианты, но я не могу это решить.Нижний колонтитул внизу внизу страницы

+1

все помещается в 'положение: absolute' без надлежащей разметки и смещений. – Era

+0

я испытал его на jsfiddle и он приходит в сноске https://jsfiddle.net/w3rz1vwe/ –

+0

удалить #quiz { слева: 50%; margin-left: -25%; позиция: абсолютная; } .survey-form { \t ширина: 100%; } положение: абсолютное от обоих –

ответ

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; 
 
\t 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 
 
{ 
 
\t height:100%; 
 
\t width:100%; 
 
} 
 
body { 
 
    color: #000; 
 
    height:100%; 
 
    width:100%; 
 
    font-size: 16px; 
 
    line-height: 20px; 
 
    text-align: left; 
 
    overflow-x:hidden; 
 
} 
 
#header { 
 
\t width:100%; 
 
\t height:100px; 
 
} 
 
#logo{ 
 
\t clear:both; 
 
\t 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; 
 
\t font-weight:600; 
 
} 
 

 
#quiz label 
 
{ 
 
\t font-family: 'Roboto', sans-serif; 
 
\t font-weight:normal; 
 
} 
 

 
#results { 
 
    font: 44px Georgia, Serif; 
 
} 
 

 
center 
 
{ 
 
\t font-size:xx-large; 
 
\t padding:20px 0 50px 0; 
 
\t font-family: 'Roboto', sans-serif; 
 
} 
 

 
.form-footer .button { 
 
    margin-right: 10px; 
 
    margin-bottom: 5px; 
 
\t color: #fff; 
 
    text-shadow: 0 1px rgba(0, 0, 0, 0.08); 
 
\t  background-color: #ecae3d; 
 
\t \t 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; 
 
\t font-family: "Roboto", Arial, Helvetica, sans-serif; 
 
    font-weight: 400; 
 
} 
 

 
.form-footer .button:hover{ 
 
\t 
 
\t background-color:#DBDBDB; 
 
\t color:#000; 
 
} 
 

 
#quiz { 
 
    left: 50%; 
 
    margin-left: -25%; 
 
    position: relative; 
 
    
 
} 
 

 
#footer{ 
 
\t width:100%; 
 
\t height:80px; 
 
\t background-color:#2D2D2D; 
 
\t color:#9C9C9C; 
 
\t clear:both; 
 
} 
 

 
#footer #footer-center 
 
{ 
 
\t font-size:18px; 
 
\t margin:auto; 
 
\t font-family: "Roboto", Arial, Helvetica, sans-serif; 
 
\t clear:both; 
 
\t padding:20px 0 0 0 ; 
 
\t 
 
} 
 

 
.survey-form 
 
{ 
 
\t 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> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"/> 
 
\t 
 

 
\t <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/> 
 
\t <link rel="stylesheet" type="text/css" href="CSS/style.css"/> 
 
\t <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"> 
 

 
\t \t \t \t \t <!-- Logo--> 
 
\t \t \t \t \t <div id="logo"> 
 
\t \t \t \t \t \t <a href="index.html" class="standard-logo"><img src="images/sequreone-logo.png" alt="Secqureone Logo"></a> 
 
\t \t \t \t \t </div><!-- #logo end --> 
 
</header> \t 
 
\t \t 
 
\t \t <div class="survey-form" id="form"> 
 
\t \t 
 
\t \t <form action="contact.php" method="post" id="quiz"> 
 
\t \t 
 
      <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
       
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t 
 
       <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> 
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
\t \t \t \t <li> 
 
       
 
        <h3>How Frequently does your Business perform security scanning of your website?</h3> 
 
        
 
\t \t \t \t \t <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> 
 
\t \t \t \t \t 
 
        <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <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> 
 
\t \t \t \t 
 
      
 
      </ol> 
 
      
 
      <div class="form-footer text-left"> 
 
         <button type="submit" data-btntext-sending="Next" class="button btn-primary">Submit</button> 
 
         
 
        </div> \t \t 
 

 
\t \t 
 
\t \t </form> 
 
\t \t 
 
\t \t <div id="footer"> 
 
\t \t 
 
\t \t <center id="footer-center"> Copyright &copy; 2016 XYZcorp,Inc. All rights reserved </center> 
 
\t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t 
 
\t 
 
\t </div> 
 

 
</body> 
 

 
</html>

Смежные вопросы