html - 宽度100％出现滚动时剪切元素

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

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

就我而言，如果我从bar的css中删除position：absolute，则可以正常工作。我该如何解决这个问题并使杆绝对定位？

我需要使用绝对定位，因为我有一个div元素用于背景图像，该元素占据了页面的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>

最佳答案

您可以在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的更多信息

关于html - 宽度100％出现滚动时剪切元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15175905/

Relative

html - 宽度100％出现滚动时剪切元素