Question

嗨，我正在做一个基本的布局，我的css有问题。我有一个页脚标记集，但它不会出现在页面的中间位置的底部。

这是我的CSS代码

如果是页面，我的“页脚”不会出现在脚下？

我认为它可能是我设定的高度和宽度，但我不确定将它设置为什么。

提前致谢

body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}


#social {
float: right;
background-color:black;
}

#social1 {
float:right;
background-color:black;
}

#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}

#header
{

height:100px;
background:#000;
}

#main
{

height:750px;
background:#666;
}


#footer
{
margin-bottom:-50px; 
height:50px; 
background-color:red;}
}

Answer 1

将页脚替换为：

#footer
{  position:absolute;
   bottom:0;
   width:100%;
   height:50px;   /* Height of the footer */
   background:#6cf;
background-color:red;}

使用的教程：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

这是我的完整CSS：

body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}


#social {
float: right;
background-color:black;
}

#social1 {
float:right;
background-color:black;
}

#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}

#header
{

height:100px;
background:#000;
}

#main
{

height:750px;
background:#666;
}

这就是我从html中引用它的方式：

<footer  id ="footer">Some footer text</footer>

我怀疑你没有正确引用它，你的div中有正确的id？

Answer 2

我想我看到了你的问题。在页脚css代码中，您有以下内容：

#footer
{
margin-bottom:-50px; 
height:50px; 
background-color:red;}
}

非常确定边距底部是负数是个问题。将其更改为5或10并查看是否显示。

Answer 3

我感谢您的帮助。

我从上面的夏季代码回答

#footer
{  position:absolute;
bottom:0;
width:100%;
height:50px;   /* Height of the footer */
background:#6cf;
background-color:red;}

我必须将主要部分改为

#main
{
position:relative;
height:100%;
background:#666;
}

如果页面，我的“页脚”不会出现在脚下？

3 个答案: