1. 首頁
  2. 問答
  3. 頁腳後的空白是白色的？

頁腳後的空白是白色的？

2016-08-29 132 views
0

你好我嘗試做一些事，但有頁腳經過大量的白色空間（如果我可以調用它像） 這是圖片： After that "Sponzori" there is a lot of white space as u can see頁腳後的空白是白色的？

這裏是HTML代碼

<!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>Heroic Features - Start Bootstrap Template</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom CSS --> 
 
    <link href="css/heroic-features.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.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 

 
    <!-- Navigation --> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <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> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="">Odred izviđača "IBAR"</a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav"> 
 
        <li> 
 
         <a href="about">O nama</a> 
 
        </li> 
 
        <li> 
 
         <a href="uprava">Uprava</a> 
 
        </li> 
 
        <li> 
 
         <a href="actions">Akcije</a> 
 
        </li> 
 
        <li> 
 
         <a href="cete">Čete</a> 
 
        </li> 
 
        <li> 
 
         <a href="news">Vijesti</a> 
 
        </li> 
 
        <li> 
 
         <a href="contact">Kontakt</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container --> 
 
    </nav> 
 

 

 
<center><h1>Uprava odreda</h1></center> 
 

 
<hr> 
 
<div id="id1"></div> 
 
<div id="id2"></div> 
 
<div id="id3"></div> 
 
<div id="id4"></div> 
 
<div id="id5"></div> 
 
<div id="id6"></div> 
 
    </div> 
 
    </div> 
 
<div class="container"> 
 
<div class="row"> 
 
<br> 
 

 
<br> 
 

 
     <div id="span4_well"><div class="span3 well"> 
 
     <div id="id1"> 
 
     <h3>Muamer Klimenta</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Načelnik</h3> 
 
      <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a> 
 
      <center><div id="id2"> 
 
     <h3>Almedin Džudžević</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Starješina</h3> 
 
     <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a></center> 
 
     <div id="id3"> 
 
     <h3>Haris Kalač</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Starješina/Menadžer</h3> 
 
     <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>   
 
     <div id="id4"> 
 
     <h3>Samir Monić</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Sekretar</h3> 
 
     <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a> 
 
      <div id="id5"> 
 
     <center><h3>Ilda Alomerović</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Ženski starješina odreda</h3> 
 
     <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a> 
 
     <div id="id6"> 
 
     <h3>Eldin Brđanin</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Predstavnik odreda</h3> 
 
     <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div> 
 
     
 
<center><h1 id="id15">Vodnici</h1></center> 
 

 
<hr> 
 
<div id="id2"></div> 
 
<div id="id3"></div> 
 
<div id="id15"></div> 
 
<div id="id11"></div> 
 
<div id="id10"></div> 
 
<div id="id7"></div> 
 
<div id="id8"></div> 
 
<div id="id9"></div> 
 
    </div> 
 
    </div> 
 
<div class="container"> 
 
<div class="row"> <div id="span3_well"><div class="span well"> 
 
     <div id="id7"> 
 
     <h3>Rejhan Hodžić</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Vodnik</h3> 
 
      <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a> 
 
      <center><div id="id2"> 
 
     <h3>Zijad Kurpejović</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Vodnik</h3> 
 
     <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a></center> 
 
     <div id="id3"> 
 
     <h3>Vedad Selmanović</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Vodnik</h3> 
 
     <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>   
 
    </div> 
 
    </div> 
 
    <br> 
 
    <center><h1 id="id11">Marketing</h1></center> 
 
    <center><div id="id10"> 
 
    <h3>Eldin Kurpejović</h3> 
 
     <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path('muamer.png') %>" name="aboutme" width="140" height="140" class="img-circle"></a> 
 
      <h3>Tehnička podrška/Marketing</h3></center> 
 
     <center><p id="id12"><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a></center> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div> 
 

 
<!-- Title --> 
 
    <div class="footer"> <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <center><h3>Sponzori</h3></center> 
 
      </div> 
 
     </div> 
 
     <!-- /.row --> 
 

 
     <!-- Page Features --> 
 
     <div class="row text-center"> 
 

 
      <div class="col-md-3 col-sm-6 hero-feature"> 
 
       <div class="thumbnail"> 
 
        <img src="http://placehold.it/800x500" alt=""> 
 
        <div class="caption"> 
 
         <h3>Ime sponzora</h3> 
 
         <p>Opis sponzora</p> 
 
         <p> 
 
          <a href="#" class="btn btn-primary">Posjetite</a> 
 
         </p> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-3 col-sm-6 hero-feature"> 
 
       <div class="thumbnail"> 
 
        <img src="http://placehold.it/800x500" alt=""> 
 
        <div class="caption"> 
 
         <h3>Ime sponzora</h3> 
 
         <p>Opis sponzora</p> 
 
         <p> 
 
          <a href="#" class="btn btn-primary">Posjetite</a> 
 
         </p> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-3 col-sm-6 hero-feature"> 
 
       <div class="thumbnail"> 
 
        <img src="http://placehold.it/800x500" alt=""> 
 
        <div class="caption"> 
 
         <h3>Ime spnzora</h3> 
 
         <p>Opis sponzora</p> 
 
         <p> 
 
          <a href="#" class="btn btn-primary">Posjetite</a> 
 
         </p> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-3 col-sm-6 hero-feature"> 
 
       <div class="thumbnail"> 
 
        <img src="http://placehold.it/800x500" alt=""> 
 
        <div class="caption"> 
 
         <h3>Ime sponzora</h3> 
 
         <p>Opis sponzora</p> 
 
         <p> 
 
          <a href="#" class="btn btn-primary">Posjetite</a> 
 
         </p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>

，這裏是css文件

#id2 { 
 
    position: relative; /* Declared position allows for location changes */ 
 
    top: -285px; /* Moves the image 2px closer to the top of the page */ 
 
} 
 

 
#id3 {float: right; 
 
    position: relative; /* Declared position allows for location changes */ 
 
    top: -585px; /* Moves the image 2px closer to the top of the page */ 
 
} 
 

 

 
#id4 {position: relative; /* Declared position allows for location changes */ 
 
    top: 0px; /* Moves the image 2px closer to the top of the page */ 
 
left:-875px;} 
 

 

 
#id5 { 
 
    position: relative; /* Declared position allows for location changes */ 
 
    top: -287px; /* Moves the image 2px closer to the top of the page */ 
 
    right: -435px; 
 
} 
 

 
#id6 { 
 
    position: relative; /* Declared position allows for location changes */ 
 
    top: -287px; /* Moves the image 2px closer to the top of the page */ 
 
    right: -385px; 
 
} 
 

 
#id15 {position: relative; 
 
right: -125px;} 
 

 
#span3_well {position: relative; 
 
top:-796px; 
 
left: -14px;} 
 

 
#id11 {position: relative; 
 
right: -100px; 
 
top: -300px;} 
 

 
#id10 {position: relative; 
 
right: -95px; 
 
top: -300px;} 
 

 
#id12 {position: relative; 
 
top: -300px;} 
 

 
.row {position: relative; 
 
top: -305px;} 
 

 
#span4_well {position: relative; 
 
top: 250px;} 
 

 

 
.footer { 
 
    position: relative; 
 
    bottom: 800px; 
 
}

在這裏做什麼IM新手

來源

2016-08-29 E1337K

+0

你爲什麼要使用位置：上所有元素相對的，許多有否定位置？ – user1725382

回答

相關問題

 相關問題