0

我一直试图让我的页脚正确显示，并结合了多种方法，但仍然得到相同的结果。页脚位于距页面顶部固定数量的像素处，并且不会一直延伸到整个页面。无论内容的大小如何，我都需要它显示在内容的正下方，并使其一直延伸到整个页面。

的CSS：

html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}

#footer {
    width:100%;
    display:block;
    background-color:#4a4a4a;
    color:#fff;
    font-family:'discoregular';
    left:-5%;
    bottom:0;
    top:100%;
    height:100%;
    text-align:center;
    float:left;
    position:relative;
    body:before;
    content:"";
    overflow:auto;
    margin-top:50px;
    padding:10px;
}

#footer, #push{
    height:50px;
}

.clearboth {
clear:both;

}

的HTML：

<body><div id="container">
 <!--Content-->
 <div id="push"></div>
   </div>
 <div class="clearboth"></div>
 <div id="footer">Footer Content</div>
4

3 回答 3

1

您需要确保从您的 html 中引用您的 css 文件，因此您的 html 应如下所示，如果它们位于同一目录中，则无需添加路径：

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>

<body><div id="container">
 <!--Content-->
 <div id="push"></div>
   </div>
 <div class="clearboth"></div>
 <div id="footer">Footer Content</div>

还有你的css，我拿走了左边的-5%：

#page {
      min-height: 100%;
      position:relative;
}

#main {
      padding-bottom: 50px;
}

#footer {
    background-color:#4a4a4a;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 50px;
    padding:10px;
    font-family:'discoregular';
    display: block;
    overflow:auto;
    text-align:center;
    float:left;
    margin-top:50px;

}
于 2013-08-24T18:51:43.493 回答
0

将css更改为以下内容。您可以更改“底部”以便它可以出现

#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px; 
padding:10px;

}

于 2013-08-24T19:04:01.413 回答
0

阅读这篇文章后，我在页脚样式中添加的所有内容是-溢出：自动；- 现在已经整理好了

于 2014-12-14T21:25:51.863 回答