0

我对 CSS 和 Div 定位还很陌生，遇到了一个问题

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

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

图 1 是 LEFT 200 像素

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

图 3 是正确的 200 像素

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

页脚br

{

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

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

4

2 回答 2

0

您试图在页面底部强制设置页脚，同时将其居中。看看 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>
于 2012-04-26T02:54:22.290 回答
0

我想出了一个非常简单的解决方案，以及为什么我的简单解决方案最初不起作用

首先，我意识到我没有

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

第三，我在 div 中使用了一张图片来表示中间的 1000 像素——

这就是在底部获得居中页脚所需的全部内容：

  1. 1000像素中心片
  2. 左侧 200 像素和右侧 200 像素将是“填充”块
  3. 停留在页面底部

页脚

{

    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;
}
于 2012-04-26T15:28:58.840 回答