Bootstrap響應式頁腳全屏幕背景

我製作了全屏幕旋轉木馬，導航欄和頁腳的網站。導航欄和形象是好的，但對於頁腳我已經滾動，我們才能作出這樣的方式尺寸頁腳進來1個屏幕無蝸殼Bootstrap響應式頁腳全屏幕背景

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以使其響應

來源

2015-04-02 Milind

在對腳部構件你的CSS樣式嘗試刪除'高度：40px'並將其設置爲'高度：100％' '頁腳{身高：100％;文本對齊：中心;的line-height： 40px; background-color：＃000000; width：100％; color：#fff; position：absolute; left：0; right：0; font-size：12px;}' – 2015-04-02 08:07:12

不，它使醜陋和頁腳覆蓋整個頁面 – Milind 2015-04-02 08:10:23

'height：auto'你可以添加任何圖像來顯示正在發生的事情和你的期望？ – 2015-04-02 08:10:51

只需將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; 
}

來源

2015-04-02 09:00:28

Bootstrap響應式頁腳全屏幕背景

回答

相關問題