width 100% 出现滚动时剪切元素答案

【问题标题】：width 100% cut the element when scrolling appearswidth 100% 出现滚动时剪切元素
【发布时间】：2013-03-02 15:05:09
【问题描述】：

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

搜索其他类似问题，发现可以通过设置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>

【问题讨论】：

#red 的最小宽度规则是不必要的，除非你想声明一个绝对长度。

标签： html css

【解决方案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.

【讨论】：

有必要使用相对吗？我最容易对所有项目使用绝对而不考虑嵌套元素

【解决方案2】：

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

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

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

您不需要将 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;
}

【讨论】：