Question

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

搜索其他类似的问题，我已经看到可以通过将正文样式的边距和填充设置为0px来解决问题。

在我的情况下，如果我从条形码的css中删除 position：absolute ，它就有效。我该如何解决这个问题并保持酒吧绝对定位？

我需要使用绝对定位，因为我有一个背景图像的div元素占据页面的100％（垂直和水平）。如果我把条放在它后面，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>

Answer 1

您可以在css中使用position:relative。

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.

有关http://www.w3schools.com/cssref/pr_class_position.asp或http://css-tricks.com/absolute-positioning-inside-relative-positioning/

上position的更多信息

Answer 2

如果您想要背景图像覆盖100％的身体，请添加

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

到页面正文的css并删除#background div。

您无需将html和正文宽度和高度设置为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;
}

当滚动出现时，宽度100％切割元素

2 个答案: