Question

我知道除了我的页脚之外，我需要在包装器中包含我的所有内容。我假设，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 */

}

Answer 1

如果您将#footer设置为position: absolute并添加bottom: 0px;，则会将其定位在页面底部。请记住position: absolute将宽度设置为内容的宽度，如果您没有设置它，那么也将width: 100%放在那里。

这可以帮助您获得水平滚动条添加

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

到你的CSS文件

页脚的实现将我页面的中间内容推下来

1 个答案: