css - 页脚没有扩展

Question

我对css很新，我仍然很难理解一些概念，特别是定位。 无论如何，我的问题是，当我设置容器的position: relative;和我的页脚position: absolute; bottom: 0;时，页脚变小了。它与我放置这些代码之前应该是容器的宽度相同。我这样做是因为我希望我的页脚位于容器的最底部。

以下是截图：

栗色是页脚。

在我的页脚中，我不使用div，而是使用html元素<footer>。

我的css代码：

div#container {
    height: 100%;
    width: 1000px;
    margin: auto;
    background-color: #C9C9C9;
    position: relative;
}

footer {
    background-color: #340B09;
    height: 50px;
    position: absolute; 
    bottom: 0;
}

请帮忙。

Answer 1

添加宽度：1000px;到你的页脚

Answer 2

检查一下，如果这可能对您有所帮助 https://developer.mozilla.org/samples/cssref/css-positioning.html

我还鼓励您在浏览器中安装firebug

同样在页脚上方，添加一些div容器，给它一些高度..这样页脚将保持在底部。不要明确使用定位...因为你是新手。

给自己一些时间，你会在它上面...... CSS位置： - ）

Answer 3

您是否有必要使用相对和绝对定位？我问，因为它有一个缺点，即页面的布局与所有不同尺寸的屏幕的布局不一样。

由于您希望在容器底部显示页脚，因此可以通过这种方式完成。

<style type='text/css'>

body{
  margin: 0px;
  padding: 0px;
  background-color: black;
}

#inbody{           /* main page */
  padding-top: 10px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding-bottom: 10px;
  height: 1170px;
}

#container{         /*container */
  padding: 10px;        
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 30px;       
  height: 1130px;   
  background-color: orange;         
}

#header{            /* header */
  margin-left: 168px;
  height: 51px;
}

#midbody{           /* middle body */
  margin: 10px;
  padding: 0px;
  height: 999px;
}

#footer{            /* footer */
  padding: 10px;
  height: 30px;
  background-color: black;
}

</style>

此外，您可以更改每个部分的颜色以查看更改。还可以使用inspect元素来显示网页的HTML和CSS。同样对于盒子模型概念，尝试在inspect元素中试验度量。

Answer 4

您正在使用;

footer {
    background-color: #340B09;
    height: 50px;
    position: absolute; 
    bottom: 0;
}

如果footer是某个ID或类，则应在CSS中定义#footer或.footer，如果您使用的是html5元素footer则没有问题。

如果要拉伸元素以填充容器，请使用width: 100%。如果页脚位于container内，请将其添加到页脚。否则它将延伸到屏幕。

Answer 5

我通过将页脚宽度声明为980px来正确解决它;当我尝试1000px时，它变得比容器更宽，因为在研究之后我发现mozilla和webkit在宽度上不包括填充。