Question

因此我的网站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;
}

有什么理由发生这种情况吗？

Answer 1

它包含#info元素，其中包含width: 100%和padding: 10px，有效地导致20px的溢出内容。

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

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

<强>更新

我对你想要完成的事情有了更好的理解。

由于它绝对定位，宽度会崩溃。不是为该元素明确设置宽度，而是使用left和right隐式设置它。

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    padding: 10px;
    height: auto;
    left: 0;
    right: 0;
}

Answer 2

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

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    overflow:hidden;
    width: 100%;
}
#info a{
    display:block;
    padding:10px;
}

在窗口调整大小时，网站标题不会延伸100％

2 个答案: