1

フッターを除くすべてのコンテンツをラッパー内に含める必要があることを理解しています。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.

フッター.php

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

スタイル.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 */

}
4

1 に答える 1

0

を設定し#footerてposition: absolute追加bottom: 0px;すると、ページの下部に配置されます。position: absolute設定しない場合は、幅をコンテンツの幅に設定することを忘れないでくださいwidth: 100%。

これは、水平スクロールバーを追加するのに役立ちます

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

あなたのCSSファイルに

于 2012-12-08T20:57:54.800 に答える