Question

我一直试图让我的页脚正确显示，并结合了多种方法，但仍然得到相同的结果。页脚从页面顶部开始固定数量的像素，并且不会一直延伸到页面上。我需要它显示在内容的下方，无论内容的大小，以及它在页面上一直延伸。

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>

Answer 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;

}

Answer 2

将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;

}

Answer 3

阅读完这篇文章后，我加入了我的页脚样式 - 溢出：auto; - 现在已经整理好了

页脚没有坐在容器div的底部

3 个答案: