1

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

下面是屏幕截图：

在此处输入图像描述

栗色是页脚。

在我的页脚中，我不使用 div 而是使用 html element <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;
}

请帮忙。

4

5 回答 5

5

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

于 2012-09-08T15:08:14.160 回答
2

检查这个，如果这可以帮助你 https://developer.mozilla.org/samples/cssref/css-positioning.html

我也会鼓励你在浏览器中安装 firebug

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

给自己一些时间，你会在它上面..with CSS position :-)

于 2012-09-08T15:06:24.780 回答
2

你有必要使用相对定位和绝对定位吗？我之所以问，是因为它有一个缺点，即对于所有不同尺寸的屏幕，页面的布局将与往常不同。

由于您想在容器底部显示页脚，所以这里可以通过这种方式完成。

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

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

于 2012-09-08T15:39:50.057 回答
1

您正在使用;

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

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

如果要拉伸元素以填充容器，请使用width: 100%. 如果页脚在您的container. 否则它会伸展到屏幕上。

于 2012-09-08T15:21:52.380 回答
1

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

于 2012-09-10T10:05:12.237 回答