网站标题在窗口大小调整时不会拉伸 100%

发布于 2025-01-04 13:40:46 字数 655 浏览 0 评论 0原文

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

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

原文

So my website http://dealminion.com has a header that is set to 100%. However if I resize the browser window then scroll to the right the header stops but the page keeps going. It's very odd. If you go to the site and resize the window you will see what I am saying.
Here is the 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');
}

and the body css:

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

Is there any reason why this is happening?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橙幽之幻 2025-01-11 13:40:46

它会拉伸以包含具有 width: 100% 和 padding: 10px 的 #info 元素，从而有效地导致 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;
}

It's stretching to contain your #info element which has width: 100% and padding: 10px, effectively causing 20px of overflowed content.

Since #info is a block-level element, you don't need to set the width to 100%. Just set width: auto (or don't set it at all), and it will fill the available space, making allowances for padding, borders, and margins, without causing overflow.

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

UPDATE:

I have a better understanding of what you're trying to accomplish.

Since it's absolutely positioned, the width collapses. Instead of setting your width explicitly for that element, set it implicitly with left and right.

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

回复收藏 0 原文

萧瑟寒风 2025-01-11 13:40:46

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

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

if you do not any element in your #info, try:

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

回复收藏 0 原文

~没有更多了~