Question

我希望页脚停留在页面底部。现在，它位于顶部...我已经发布了我的HTML和我所有的CSS，所以你可以看到。我觉得这样做可能更容易吗？我试图添加将身体拉伸到底部的容器，但它与页面上的其他容器混淆并使它们脱落到顶部。我需要快速回答，因为这应该在一周内完成！

* {
 margin:0;
 padding:0;
}
body {
    font-family:Arial;
    background:#fff url(images/bg1.png) repeat;
    background-size: 700px;
    height: 100%;
    min-height: 100%;
}
.title {
    width:548px;
    height:119px;
    position:absolute;
    background:transparent url(title.png) no-repeat top left;
}
#content {
    margin:0 auto;
}
#horizon {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
    visibility: visible;
    display: block;
}
#stuff {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #fff;
    opacity: 0.6;
    margin-left: -500px;
    position: absolute;
    top: -125px;
    left: 50%;
    width: 1000px;
    height: 250px;
    visibility: visible;
    overflow: scroll;
    padding: 10px;
    border: 5px dotted #F3DECD;
    text-align: center;
}
footer {
}

<body> 
	
    <div id="content">
        <div class="title"></div>

        <div class="navigation" id="nav">
            <div class="item user">
                <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
                <a href="#" class="icon"></a>
                <h2>Home</h2>
                <ul>
                    <li><a href="aboutshop.html">About the Shop</a></li>
		            <li><a href="aboutartist.html">About the Artist</a></li>
                </ul>
                </div>
                <div class="item home">
                    <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>How-To's</h2>
                    <ul>
                        <li><a href="howtojewelry.html">Jewelry</a></li>
                        <li><a href="howtoclay.html">Clay</a></li>
                    </ul>
                </div>
                <div class="item shop">
                    <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Portfolio</h2>
                    <ul>
                        <li><a href="jewelry.html">Jewelry</a></li>
                        <li><a href="clay.html">Clay</a></li>
                        <li><a href="digital.html">Digital</a></li>
                    </ul>
                </div>
                <div class="item camera">
                    <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Contact</h2>
                    <ul>
						<li><a href="contact.html">Questions</a></li>
                        <li><a href="suggestions.html">Suggestions</a></li>
                    </ul>
                </div>
            </div>
        </div>	
		
        <div id="horizon">
	        <div id="stuff">
	        <h2> Welcome! </h2><br>
	        <p>This is a page that I have created for all my jewelry. This will be updated with new information periodically.</p>
	    </div>
    </div>
    <footer>

        <a href="">
            <img height="32" width="32" alt="'s Deviantart" src="deviantart.png">  
        </a> &nbsp;&nbsp;&nbsp;
        <a href="">
            <img height="32" width="32" alt="'s Think Jewelry Page" src="facebook.png"> 
        </a>

    </footer>

Answer 1

你可以简单地设置一个绝对位置的div。它看起来像这样：

HTML：

<div id='footer'></div>

的CSS：

#footer{
  height:45px;
  width:100%;
  background-color:grey;
  position:absolute;
  bottom:0;
}

Answer 2

您可以使用固定页脚：

<强> HTML

 <footer>
     ...
 </footer>

<强> CSS

footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 150px;
  width: 100%;
}

页脚始终会在页面底部的视口中显示，请查看此codepen.

如果您正在寻找粘性页脚方法，请检查this。

Answer 3

你可以这样试试，

footer
{
 position:fixed;
}

Answer 4

对于始终存在于主要内容末尾的粘性页脚，我总是发现使用包含负推送div的包装器（设置为与所需页脚大小相同）是一个简单但最坚固的方法

CSS

* {
  margin: 0;
}

html, body {
  height: 100%;
}

.wrapper {
  height: auto !important;
  height: 100%;
  min-height: 100%;
  margin: 0 auto -150px;
}

.push {
  height: 150px;
}

footer {
  height: 150px;
  background-color: #900; /*red */ 
}

HTML

<html>
    <head>
        <!-- -->
    </head>
    <body>
        <div class="wrapper">
            <p>Main Content</p>
            <!-- -->
            <div class="push"></div>
        </div>
        <footer>
            <p>Footer Content</p>
            <!-- -->
        </footer>
    </body>
</html>

请参阅此处的codepen示例：

http://codepen.io/anon/pen/EaPRQb

只需将推动div和页脚高度更改为所需的高度（在我的示例中为150px），并将包装器的下边距设置为该高度的负值（即，在我的示例中为-150px）

页脚底部？

4 个答案: