网站标题不能在窗口调整大小上调整为100％

因此，我的网站http://dealminion.com的标题设置为100％。但是，如果我调整浏览器窗口的大小，然后滚动到右侧的标题停止，但页面继续。这很奇怪。如果您访问该网站并调整窗口大小，您将看到我在说什么。这里是CSS：网站标题不能在窗口调整大小上调整为100％

#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; 
}

是否有任何理由，这是怎么回事？

来源

2012-02-10 Naterade

会发生这种情况在什么浏览器？快速查看铬显示没有问题。 – Marcus 2012-02-10 15:33:47

，因为你的'div＃info'有'padding：10px'。所以总有'100％+ 20px' – Giberno 2012-02-10 15:35:13

有同样的问题..甚至谷歌有同样的问题检查google.com ..我想它没有答案。我想知道你是如何解决这个问题的？ – 2012-06-23 12:55:18

它延伸到包含您的#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 */ 
}

UPDATE：

我有一个更好的了解你要完成的任务。

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

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

来源

2012-02-10 15:32:45 Brent

我刚刚尝试过您的建议，但现在'＃info'只适合测试“工作原理”。它不再伸展。 – Naterade 2012-02-10 15:43:03

@Naterade查看更新。 – Brent 2012-02-10 15:44:44

这些建议都很棒，我从来不知道你可以这样做布伦特，你也是吉布尔诺。但是，当我将它缩小时，标题仍停留在浏览器窗口的右边缘。然后向右滚动停止填充页面，它看起来被切断。 – Naterade 2012-02-10 15:54:49

如果不这样做的任何元素

在#info，尝试：

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

来源

2012-02-10 15:47:27 Giberno

@Naterade，因为你设置了'#wrapper {width：1020px;}'所以如果你想'在右边停下来'，''min-width：1020px'加入'body'，html' – Giberno 2012-02-10 16:08:31

网站标题不能在窗口调整大小上调整为100％

回答

相关问题