頁腳的實現將我的頁面的中間內容壓低

我知道我需要將所有內容包含在包裝中，除了頁腳外。我推測，div推動了我的頁腳到我的頁面底部。正在發生的事情是推動推動我的其他內容，而不是我的標題。頁腳的實現將我的頁面的中間內容壓低

我使用header.php，home.php，styles.css和footer.php 我對網站建設非常陌生！任何幫助將非常感激。

的header.php

<body> 

<div class="wrapper"> 

<div class="container"> 
    <div class="navbar"> 
    <br><a href="index.php"><img src="img/banner.jpg" alt="Macaron" width="400"></a></br> 
     <div class="navbar-inner"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
        <div class="nav-collapse collapse"> 
         <ul class="nav"> 
         <li><a href="imagine.php">Imagine</a></li> 
         <li><a href="recipes.php">Recipes</a></li> 
         <li><a href="shops.php">Shop Locator</a></li> 
         <li><a href="photos.php">Photos</a></li> 
        </ul> 
        </div> 

     </div> 
    </div> 
</div> 
<div class="push"></div> 
</div>  
<div id="middle">

home.php

This is the bulk of my page's content.

footer.php

<div class="footer"> 
     <div class="container"> 
      <p> A macaron fan page by Avery Dao and Diana Nguyen </p> 
     </div> 
    </div>

style.css的

 /* styles the sticky footer */ 
html, body 
{ 
    height: 100%; 
} 

.wrapper 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -70px; /* the bottom margin is the negative value of the footer's height */ 
} 

/* Set the fixed height of the footer here */ 
#footer, #push 
{ 
    clear: both; 
    height: 70px; /* .push must be the same height as .footer */ 
} 

.footer 
{ 
    position:relative; 
    font-size: 10pt; 
    font-family: serif; 
    padding: 10px; 
    color: #999999; 
    background: #ffffff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0); /* IE6-9 */ 

}

來源

2012-12-08 Diana

在你的CSS'#footer的，＃push'假定這兩種頁腳和推動使用'id'但你的html代碼顯示類。 – JFK

如果設置了#footer到position: absolute並添加bottom: 0px;它定位在頁面的底部。記住position: absolute將寬度設置爲內容的寬度，如果你沒有設置它，那麼在那裏也放上width: 100%。

這應該幫助它你會得到一個水平滾動條添加

* { 
    padding: 0px; 
    margin: 0px; 
}

你的CSS文件

來源

2012-12-08 20:57:54

頁腳的實現將我的頁面的中間內容壓低

回答

相關問題