0

我有一个带有水平条的简单页面，应该与文档页面一样长。问题是，当我将浏览器窗口的大小调整到正文的最小高度以上时，滚动文档时没有显示部分栏。

搜索其他类似的问题，我发现问题可以通过将body style的margin和padding设置为0px来解决。

在我的情况下，如果我从栏的 css 中删除position:absolute ，它就会起作用。我怎样才能解决这个问题并保持酒吧绝对定位？

我需要使用绝对定位，因为我有一个占页面 100% 的背景图像的 div 元素（垂直和水平）。如果我将栏放在 div 元素之后，它不会保持原位。

<style type"text/css">

html, body
{  
    width: 100%;
    min-width:500px;
    height: 100%;
    min-height:700px;
    margin:0px;
    padding: 0px;  
}

#red {
    position:absolute;
     top:100px;
     width:100%;
     min-width:100%;
     height:37%;
     min-height:300px;
     max-height:330px;
     background: rgb(0,0,0);
     margin: 0px;
    padding: 0px;
}

#background
{
    position:fixed;
     width:100%;
     height:100%;
     background: rgb(56,54,0);
     margin: 0px;
     padding: 0px;
}

</style>

<body>

<div id="background"></div>
<div id="red"></div>

</body>
</html>
4

2 回答 2

2

你可以position:relative在你的CSS中使用。

absolute和之间有区别relative

绝对： The element is positioned relative to its first positioned (not static) ancestor element.

相对的： The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.

更多position关于http://www.w3schools.com/cssref/pr_class_position.asp或http://css-tricks.com/absolute-positioning-inside-relative-positioning/

于 2013-03-02T15:14:38.093 回答
0

如果您希望背景图像覆盖 100% 的身体，请添加

background-image: url(../yourImageHere.jpg)

到页面主体的 css 并删除#backgrounddiv。

您不需要将 html 和 body 的宽度和高度设置为 100%，因为无论如何它们都默认为这个。根据您的需要，我将 css 整理如下：

html, body    {  
    margin:0px;
    padding: 0px;
    background-image: url(../yourImageHere.jgp)  
}

#red {
     position:absolute;
     top:100px;
     left:0;
     width:100%;
     min-height:300px;
     max-height:330px;
     background: rgb(0,0,0);
     margin: 0px;
     padding: 0px;
}
于 2013-03-02T15:20:28.307 回答