Как установить верхний и нижний колонтитулы в css?

Я хочу установить заголовок, зафиксированный в верхнем и нижнем колонтитулах на боту страницы.Как установить верхний и нижний колонтитулы в css?

Изображение:

код индексной страницы:

<!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" /> 
      <title>Home</title> 
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
      <link href="custom.css" rel="stylesheet" type="text/css"> 
     </head> 

     <body class="bodyy"> 

      <div class="container-fluid form"> 
       <div class="row"> 
       <div class="col-md-12 llg"> 
       <img src="image/my-site-planner-logo.png" class="logo" /> 
       </div> 
      </div> 
      </div> <!--container ends--> 

      <div class="container"> 
       <div class="row"> 
       <div class="col-md-3"> 
       </div> 
        <div class="col-md-6"> 
         <form method="post" action="" class="formt"> 
          <div class="form-group"> 
           <input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/> 
          <br /> 
        <input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/> 
         <br /> 
           <button class="btn btn-primary bbt" name="submit-" type="submit"> 
           Sign Me In 
          </button> 
         <p class="text-center ttr"> 
         Want to Register a New User ? 
         </p> 
        <button class="btn btn-primary bbt" name="submit-" type="submit"> 
           <a href="sign-up.html" class="tbb"> 
         Create Account 
         </a> 
          </button> 
        </div> 
         </form> 
        </div> 
       <div class="col-md-3"> 
       </div> 
      </div> <!--row ends--> 
      </div> <!--container ends--> 

      <div class="footer form"> 
       <h4> 
        &copy; 2016 My Site Planner | All Rights Reserve 
       </h4> 
       </div> 
      </div> 
      </div> <!--container ends--> 


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

      <script src="js/bootstrap.min.js"></script> 
      <body oncontextmenu="return false"> 
     </body> 
     </html>

CSS код:

body{ 
    margin: 0 auto; 
    background-image: url("white-background-1.jpg"); 
    background-size: 100px 100px, 
    background-repeat: no-repeat; 
} 
.ul{ 

list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 


} 
.container{ 
    width: 400px; 
    height: 400px; 
    text-align: center; 
    background-color: rgba(0, 255, 255, 0.5); 
    border-radius: 4px; 
    margin: 0 auto; 
    margin-top: 150px; 

} 



.footer .form { 
     margin-top: 100px; 
} 



table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
}

Я попытался изменить код, .footer .FORM как позиция абсолютные и заголовок прокрутка , Пожалуйста, кто-нибудь может мне помочь?

источник

2016-11-15 Warda

Возможный дубликат [Как сделать этот заголовок/Контент/Нижний колонтитул с использованием CSS?] (Http://stackoverflow.com/questions/7123138/how-to-make-this-header-content-footer-layout- using-css) и http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height –

I подумайте, что вы используете бутстрап неправильно, особенно предоставляя ширину контейнеру класса bootstrap. Это испортит ваш дизайн на более поздних этапах. – Aslam

Да, @hunzaboy. Это загруженный проект, и мой босс дал нам проект, чтобы работать над ним. Что я могу сделать. Мой ум перевернулся. :( – Warda

.footer .form { 
     margin-top: 100px; 
     position:fixed; 
     bottom:0px; 
}

заменить этот код, чтобы исправить футере

источник

2016-11-15 11:39:42

это не помогло мне – Warda

@Warda, я внесли некоторые поправки, пожалуйста, проверьте это. –

Как я вижу, что вы используете Bootstrap вы можете использовать один из своих шаблонов.

Взгляните на это:

http://getbootstrap.com/examples/sticky-footer-navbar/

Еще один момент, о вашем коде, его не suposed быть хорошей практикой изменить непосредственно класс контейнера, так как его бутстраповской основы.

Надеюсь, что это помогает,

С уважением

источник

2016-11-15 11:42:30

Да, любые изменения, внесенные мной в мою собственность, никаких изменений в макете. – Warda

Я не эксперт, но вы можете попробовать использовать:

Position: fixed;

Или

Position: bottom;

Надеется, что это помогает!

источник

2016-11-15 11:47:49 Yoshirou

Как установить верхний и нижний колонтитулы в css?

ответ

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