footerbr

Question

我对CSS和Div定位相当新，并遇到了问题

我正在构建的应用程序底部有一个状态栏 -

状态栏宽度为1600像素，但因为我不希望浏览器的水平滚动条宽度超过1000像素，并且因为状态栏上的实际文本只有1000像素，我创建了三个图像 -

图像1是LEFT 200像素

图像2是中间的1000像素（这是设置为绝对位置，粘在浏览器窗口的底部并且工作正常）

图像3是右200像素

我所做的是制作状态栏的1600像素版本，并在1000像素条下方设置一层，并尝试使用WIDTH：100％将其设置为DIV中的背景图像

footerbr

{

background-image:url(images/footerol.jpg);
background-repeat:no-repeat;
text-align: center;
padding: 0px;
width: 100%;
height:40px;
position: absolute;
bottom:0px;
z-index: 3; 
vertical-align:bottom;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

}

我确定我在这里做错了...我可以使用这种方法，只允许浏览器让我们说1100像素宽，不要有水平滚动条，因为我在DIV中使用背景图像......话虽如此，当我有宽度时，我似乎无法居中：100％

最好的方法是，如果我可以将左右元素放置一个低于中心1000像素条的图层，并且如果浏览器窗口宽度减小（或者开始时较小）则让它在下面滑动。基本上我只是不能有水平滚动条，我不介意状态栏的左右两边是否在中间状态栏下（浏览器窗口宽度小于1600） -

非常感谢 - 感谢大家的帮助

Answer 1

您试图在页面底部强制页脚，同时使其居中。看一下 http://www.cssstickyfooter.com/using-sticky-footer-code.html。在示例之后，您可以在页脚中放置一个具有指定宽度和边距的容器：0到中心：

<div id="wrap">
  <div id="header"> </div>
  <div id="main"> </div>
</div>

<div id="footer">
  <div id="nav2"></div>
</div>

Answer 2

我找到了一个非常简单的解决方案，也解释了为什么我的简单解决方案最初没有工作

首先，我意识到我没有

其次，我创建了一个居中的背景图像，左右片段超过1000像素......

第三，我使用div中的图像来表示中间的1000像素 -

这就是我需要在底部获得一个居中的页脚：

1000像素中心件
左边200像素，右边200像素，这将是“填充”件
打到页面底部

页脚

{

    background-image:url(images/footerol.jpg);
    background-repeat:no-repeat;
    background-position:center;
    text-align: center;
    padding: 0px;
    width: 100%;
    height:40px;
    position: absolute;
    bottom:0px;
    z-index: 2; 
    vertical-align:bottom;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

中心定位DIV与背景图像使用100％宽度

footerbr

2 个答案:

页脚