Question

我用全屏旋转木马，导航栏和页脚制作了网站。导航栏和图像都很好但是对于页脚我有滚动可以制作制作尺寸，这样的方式，页脚进入1个屏幕没有滚动

CSS Code

html, body { height: 100%;}
.navbar .nav, .navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; }
.navbar-inner { text-align:center; }
.navbar-nav { font-size:12px;}/*font-family:eurostileregular; */
.navbar {min-height:45px;}
.navbar-inverse { background: rgba(0, 0, 0, 0.5);}
.carousel, .item, .active { height: 100%; }
.carousel-inner { height: 100%; }
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;}
.nav li.active a,.nav li:hover a { background:none !important; box-shadow:none !important; border-bottom:2px solid #ad1f2d; padding-bottom: 1px; display:block; }
footer { height:40px;text-align:center;line-height:40px;background-color: #000000;width:100%;color:#fff;position: absolute;left: 0;right: 0;font-size:12px;}
.redBorder { height: 2px; background-color: #ad1f2d; width: 100%; position: absolute; }

HTML Code

<!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">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Demo</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.2/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top navbar-inner" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">PROFILE</a></li>
          <li><a href="#">BUSINESS SOLUTIONS</a></li>
          <li><a href="#">PRODUCTS</a></li>
          <li><a href="#">PARTNERS</a></li>
          <li><a href="#">CAREERS</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <header id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <div class="fill" style="background-image: url('images/homepage_slide1.jpg');"></div>
      </div>
      <div class="item">
        <div class="fill" style="background-image: url('images/2.jpg');"></div>
      </div>
      <div class="item">
        <div class="fill" style="background-image: url('images/3.jpg');"></div>
      </div>
    </div>
  </header>
  <div class="container">
    <!-- Footer -->
    <footer class="container-fluid">
      <div class="row redBorder">
      </div>
      <div class="row">
          Copyright PLEXUS 2016. All rights reserved.
      </div>
      <!-- /.row -->
    </footer>

  </div>
  <!-- /.container -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script>
    $('.carousel').carousel({
      interval: 5000 //changes the speed
    })
    </script>
</body>
</html>

我们可以在myCarousel上做一些CSS来使其响应吗

Answer 1

只需将下面的bottom: 0;添加到您的页脚元素即可。

footer 
{ 
    height:40px;
    text-align:center;
    line-height:40px;
    background-color: #000000;
    width:100%;
    color:#fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;//add this
    font-size:12px;
}

Bootstrap响应式页脚与全屏幕背景

1 个答案: