2

我以为我掌握了 CSS 的窍门，终于征服了定位！好吧，直到我在 ipad 上本地测试了我的网站！

使用下面的示例，我只希望背景为黑色（没问题）。在黑色背景之上，我希望绿色的“内容背景”在黑色背景上方从左到右（100%）在整个屏幕上运行。在绿色的“内容背景”之上，我想要主容器 div。我不知道为什么，但我的例子不起作用？这应该是一件很简单的事情？？？当浏览器从右向左缩小然后滚动水平滚动条向右移动时，该问题很明显。发生这种情况时，您会看到绿色的“内容背景”不会在整个屏幕上垂直扩展？？？

任何帮助是极大的赞赏 ： ）

小提琴：http: //jsfiddle.net/Margate/Sk5X9/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Positioning</title>

<style type="text/css">     
#page-background{background-color:black; }  
#content-background{position:absolute; top: 100px; width: 100%; height: 616px; background-color: green;}
#main-container{position: relative; top: 0px; width: 1000px; height: 910px; margin: 0px auto; border: 1px solid red;}
</style>
</head>

<body id="page-background">

<div id="content-background"></div>
<div id="main-container">

</div>
</body>
</html>
4

1 回答 1

1

我拿了你的小提琴，稍微摆弄了一下，以获得你提到的预期效果。

不修改 HTML 这里是新的 CSS

#page-background {
    background-color:black;
    width: 100%;
}
#content-background {

    margin-top: 100px;
    width: 100%;
    height: 616px;
    background-color: green;
}
#main-container {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 910px;
    margin: 0px auto;
    border: 1px solid red;
}

我发现将 body width 指定为 100% 可以让子 div 正确引用屏幕尺寸，并允许子 DIV（ content-background ）跨越屏幕的长度。

** 因为 DIV 不再是“绝对”定位的 top、left、bottom 和 right 属性将什么都不做。而是使用边距来移动东西。

至于边框 DIV - 因为它在 ( content-background ) Div 之后 - 将它放在相对定位中会将其放在 ( content-background ) DIV 之后 - 通过将此 Div 指定为“绝对”，您可以放置​​它只要您设置了 top、left、bottom 和 right 属性，屏幕上的任何位置。

我希望这可以帮助您为将来的 css 使用指明正确的方向，因为可以编写此示例的方法有大约一百万种 :)

于 2013-06-19T21:58:38.217 回答