1

所以我的网站http://dealminion.com有一个设置为 100% 的标题。但是，如果我调整浏览器窗口的大小，然后向右滚动标题停止但页面继续运行。这很奇怪。如果您访问该站点并调整窗口大小，您将看到我在说什么。这是CSS：

#header-intro { 
width: 100%; 
position: absolute; 
height: 600px; 
padding-top: 25px;
background-color: #657b90;
border-bottom: 1px solid #000000;
-moz-box-shadow: 0 5px 2px -2px #777777;
-webkit-box-shadow: 0 5px 2px -2px #777777;
box-shadow: 0 5px 2px -2px #777777;
behavior: url('pie.htc');
}

和身体CSS：

html, body { 
margin: 0; 
padding: 0; 
height: 100%;
width: 100%;
background: #f8f8f8;
}

发生这种情况有什么原因吗？

4

2 回答 2

0

它正在拉伸以包含具有和的#info元素，从而有效地导致 20px 的溢出内容。width: 100%padding: 10px

由于#info是块级元素，因此无需将宽度设置为 100%。只需设置width: auto（或根本不设置），它将填充可用空间，允许填充、边框和边距，而不会导致溢出。

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    padding: 10px;
    height: auto;
    width: auto; /* changed to auto */
}

更新：

我对您要完成的工作有更好的了解。

由于它是绝对定位的，因此宽度会塌陷。不要为该元素显式设置宽度，而是使用leftand隐式设置它right。

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    padding: 10px;
    height: auto;
    left: 0;
    right: 0;
}
于 2012-02-10T15:32:45.870 回答
0

如果您的 中没有任何元素，请#info尝试：

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    overflow:hidden;
    width: 100%;
}
#info a{
    display:block;
    padding:10px;
}
于 2012-02-10T15:47:27.917 回答