html - 我的页脚上下弹跳-6ren

html - 我的页脚上下弹跳

转载作者：太空宇宙更新时间：2023-11-04 02:42:23

在我们网站的销售页面上，当用户完成整个过程时，页脚会上下移动，这有点烦人。

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 -->
  	<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]-->
	
<!--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>
			<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>
	 
    
  </body>
</html>