Мой нижний колонтитул отскакивает вверх и вниз

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

The selling page

Это обычай CSS я использую:

.ajax-loader,.offer-n-accept,.thumbnail{text-align:center}.repop-row,.repop-row-selected{border:1px solid #ebebeb;padding:20px}#declaration,#save_data,.ajax-loader,.error-msg,.payment_information,.previews{display:none}@font-face{font-family:brandfont;src:url(Inversionz.otf)}.branded{font-family:brandfont;font-size:300%;color:#FFF}.navbar .navbar-brand{font-family:brandfont;font-size:40px;color:#f5f5f5}.navbar-inverse .navbar-brand{font-family:brandfont;font-size:40px;color:#FFF}.navbar-default .navbar-brand:hover{font-family:brandfont;font-size:40px;color:#2E64FE}.row.repsteps,.row.steps{margin-bottom:10px;text-align:center;display:none}.thumbnail{cursor:pointer}.thumbnail:hover{border-color:#2E64FE}h1 span{color:#2E64FE}.offer-n-accept span{font-size:80px}.footer-links{color:#ebebeb;margin-left:5px;margin-right:5px}.repop-row,.repop-row-selected{margin-left:auto;margin-right:auto}footer.well{background-color:#000;color:#FFF;margin-top:0;margin-bottom:0;border-top:10px solid #2e64fe}.social-icons{font-size:43px;color:#fff}.repop-row{border-radius:2px;width:90%;height:90%;cursor:pointer}.repop-row-selected{border-radius:2px;width:90%;height:90%;background-color:#2e64fe;color:#fff;cursor:pointer}.repop-row:hover{border-color:#2e64fe}.repop-row-selected .repop-price-col{font-size:20px;color:#333;background-color:#fff;border-radius:2px;padding:5px}.repop-price-col,.selected .thumbnail{background-color:#2e64fe}.repop-price-col{font-size:20px;color:#fff;border-radius:2px;padding:5px}.repop-row-selected .repop-title-col{font-size:20px;margin-top:4px;color:#fff}.repop-title-col{font-size:20px;margin-top:4px}.selected .thumbnail .caption{color:#fff}.thumbnail .preview-title{font-size:16px;color:#2e64fe}span.device-price{font-size:40px;color:#337AB7;font-weight:700}.facebook-icon:hover{color:#3A5795}.twitter-icon:hover{color:#2B7BB9}.howitworks{background-color:#F2F2F2;padding:50px;margin-bottom:0}.howitworks div h3{color:#2e64fe}.howitworks div span.fa{font-size:80px}.accessory-selected .thumbnail{background-color:#2e64fe}.accessory-selected .thumbnail .caption h3{color:#FFF}.social-icons{margin:5px}.faq{background-color:#FAFAFA}.item img{margin-left:auto;margin-right:auto}.feature h2{color:#2e64fe}.btn-toolbar .btn{margin-bottom:5px}@media(max-width:767px){.h1,h1{font-size:32px}.h3,h3{font-size:18px}}

Это файл макета:

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 

 

 
    <!-- SEO META TAGS --> 
 
    <?php if (isset($meta)): ?> 
 
    <?= $meta->meta_tags ?> 
 

 
    <?php endif ?> 
 
    <!-- /SEO META TAGS --> 
 

 
    <?php if (isset($title)&&!isset($meta)): ?> 
 
     <title><?= $title ?></title> 
 
    <?php endif ?> 
 
    <link rel="icon" href="<?= site_url() ?>resources/favicon.ico" type="image/x-icon"> 
 
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic' rel='stylesheet' type='text/css'> 
 
    <!-- Bootstrap --> 
 
    <!-- <link href="<?= site_url() ?>third_party_plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> --> 
 
    <link href="<?= site_url() ?>third_party_plugins/dist/css/style.css" rel="stylesheet"> 
 

 
    <!-- Font Awesome --> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
    <!-- Custom Styles --> 
 
    \t <link href="<?= site_url() ?>resources/css/custom.css" rel="stylesheet" > 
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
\t 
 
<!--Start of Zopim Live Chat Script--> 
 
<script type="text/javascript"> 
 
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s= 
 
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set. 
 
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8"); 
 
$.src="//v2.zopim.com/?3SUblWLeUjhC3GSemhDvAl54RWkTi0Ci";z.t=+new Date;$. 
 
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script"); 
 
</script> 
 
<!--End of Zopim Live Chat Script--> 
 
    
 
    </head> 
 
    <body> 
 
    <?php 
 
    $sell_active = ''; 
 
    $repair_active = ''; 
 
    $register_active = ''; 
 
    $login_active = ''; 
 
    $track_active = ''; 
 
    $myorders_active = ''; 
 
    //active classes. 
 
    if(uri_string() == 'sell') { 
 
    $sell_active = 'active'; 
 
    } else if(uri_string() == 'repair') { 
 
    $repair_active = 'active'; 
 
    } else if(uri_string() == 'register') { 
 
    $register_active = 'active'; 
 
    } else if(uri_string() == 'login') { 
 
    $login_active = 'active'; 
 
    } else if(uri_string() == 'track') { 
 
    $track_active = 'active'; 
 
    }else if(uri_string() == 'myorders') { 
 
    $myorders_active = 'active'; 
 
    } 
 

 
    ?> 
 

 
    <!-- Navbar Starts --> 
 
    <header> 
 
    <nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="<?= site_url() ?>"><?= $this->config->item('app_name')?></a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
     <?php if(!isset($_SESSION['user_login'])): ?> 
 
     <div class="navbar-form navbar-right"> 
 
      <a href="<?= site_url() ?>login" class="btn btn-success"><span class="glyphicon glyphicon-user"></span> Login</a> 
 
     </div><!-- /.navbar-form navbar-right --> 
 
     <?php else: ?> 
 
      <div class="navbar-form navbar-right"> 
 
      <a href="<?= site_url() ?>logout" class="btn btn-info"><span class="glyphicon glyphicon-log-out"></span> Logout</a> 
 
      </div><!-- /.navbar-form navbar-right --> 
 
     <?php endif ?> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="<?= $sell_active ?>"><a href="<?= site_url() ?>sell"><span class="glyphicon glyphicon-tag"></span> Sell</a></li> 
 
      <li class="<?= $repair_active ?>"><a href="<?= site_url() ?>repair"><span class="glyphicon glyphicon-wrench"></span> Repair</a></li> 
 
      <?php if(isset($_SESSION['user_login'])): ?> 
 
      <li class="<?= $myorders_active ?>"> 
 
       <a href="<?= site_url() ?>myorders"><span class="glyphicon glyphicon-shopping-cart"></span> My Orders</a> 
 
      </li> 
 
      <?php else: ?> 
 
      <li class="<?= $track_active ?>"> 
 
       <a href="<?= site_url() ?>track"><span class="glyphicon glyphicon-globe"></span> Order Status</a> 
 
      </li> 
 
      <?php endif ?> 
 
      <?php if (isset($_SESSION['user_login'])): ?> 
 
      <?php else: ?> 
 
      <li class="<?= $register_active ?>"> 
 
       <a href="<?= site_url() ?>register"><span class="glyphicon glyphicon-pencil"></span> Register</a> 
 
      </li> 
 
      <?php endif ?> 
 
     </ul> 
 
     </div><!--/.nav-collapse --> 
 
    </div> 
 
    </nav> 
 
</header> 
 
    <!-- Navbar Ends --> 
 
    <!-- Content Starts --> 
 
    <?php echo $view ?> 
 
    <!-- Content Ends --> 
 
    <br> 
 

 

 

 
<div class="horizontal-rule bg-blue"></div><!-- /.horizontal-rule bg-blue --> 
 
<div class="section-sm bg-dark"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 
     <p class="no-margin-bottom">Open in Dade, Broward, & Palm Beach</p> 
 
     <p class="text-muted"><small>&copy; 2016 MacMetro.com. All rights reserved.</small></p> 
 
     </div><!-- /.col-sm-6 --> 
 
     <div class="col-sm-6"> 
 
     <div class="text-right"> 
 
      <ul class="list-inline"> 
 
      <li><a href="<?php echo base_url('help'); ?>">Help</a></li> 
 
\t \t \t <li><a href="<?php echo base_url('faqs'); ?>">FAQs</a></li> 
 
      <li><a href="<?php echo base_url('terms'); ?>">Terms</a></li> 
 
      <li><a href="<?php echo base_url('contact'); ?>">Contact Us</a></li> 
 
      <li> 
 
       <a href="<?= $_SESSION['company'][1]->facebook ?>" target="_blank"> 
 
       <span class="fa-stack fa-lg"> 
 
        <span class="fa fa-square fa-stack-2x"></span> 
 
        <span class="fa fa-facebook fa-stack-1x fa-inverse"></span> 
 
       </span> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="<?= $_SESSION['company'][1]->twitter ?>" target="_blank"> 
 
       <span class="fa-stack fa-lg"> 
 
        <span class="fa fa-square fa-stack-2x"></span> 
 
        <span class="fa fa-twitter fa-stack-1x fa-inverse"></span> 
 
       </span> 
 
       </a> 
 
      </li> 
 
      </ul><!-- /.list-inline --> 
 
     </div><!-- /.text-right --> 
 
     </div><!-- /.col-sm-6 --> 
 
    </div><!-- /.row --> 
 
    </div><!-- /.container --> 
 
</div><!-- /.section-sm bg-dark --> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="<?= site_url() ?>third_party_plugins/jquery/dist/jquery.min.js"></script> 
 

 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="<?= site_url() ?>third_party_plugins/bootstrap/dist/js/bootstrap.min.js"></script> 
 

 

 
    <!-- Custom scripts --> 
 
    <script> 
 
     // data to be passed to the custom script. 
 
     var site_url = "<?= site_url() ?>"; 
 
    </script> 
 
    <script src="<?= site_url() ?>resources/js/custom.js"></script> 
 
    <script src="<?= site_url() ?>resources/js/offer_acceptance.js"></script> 
 
\t 
 
    
 
    </body> 
 
</html>

источник

2015-12-28 Anonymous

Пожалуйста, внесите свой код, чтобы мы помогли вам –

Я добавил свой пользовательский CSS, пожалуйста, проверьте. Спасибо огромное! –

@FrankZwan - пожалуйста, не нажимайте сообщения, даже если вы являетесь оригинальным автором. – APC

вы можете установить положение на position: absolute;, а затем ваш нижний колонтитул будет находиться на том же месте.
position: relative; сделает его отскоком, если вы его добавили, пожалуйста, измените его на position: absolute; и добавьте top: 1000px или любую высоту.

источник

2015-12-28 08:27:29

Вы должны рассмотреть возможность использования sticky footer

<footer class="footer"> 
    <!-- Your footer content here --> 
</footer>

Липкий <footer> можно найти here и CSS here

источник

2015-12-28 08:34:39 sjokkogutten

Два предложения для вас от верхней части головы может быть:

Give ваш <div class="section-md"> минимальная высота, чтобы она надавила нижний колонтитул, ширина экрана сильно варьируется, но высота не так часто. Затем он также будет следовать дальше на более мелкие устройства.

В качестве альтернативы вы можете сделать <div id="footer"> и придать ему фиксированное положение, чтобы убедиться, что оно всегда будет внизу, на случай, если вы хотите, чтобы информация отображалась в любое время.

Однако для решения этой проблемы возможны другие решения.

источник

2015-12-28 09:49:37 Winthxr1909

Хороший вариант о липкой нижней.

Вы также можете добавить дополнительный класс (fx .: order-steps) в раздел с классом section-md, который содержит все этапы. Добавить объект в

.order-steps { min-height: 600px }

это сделает «комнату» для содержания в различных стадиях.

источник

2015-12-28 09:51:39 stubben

Мой нижний колонтитул отскакивает вверх и вниз

ответ

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