标题不是全宽 - HTML/CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21358066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Header not full width - HTML/CSS
提问by apples
My header of my webpage is a image. The only problem is that it is not the full width of the page it stretches to the end of the right side of the page but not the left. My question is how do I make it fit the whole page width?I have done some searching and haven't found anything. I have tried changing all the css elements with no luck. Not sure why this is happening.
我的网页标题是一张图片。唯一的问题是它不是页面的整个宽度，而是延伸到页面右侧的末尾而不是左侧。我的问题是如何使它适合整个页面宽度？我已经做了一些搜索，但没有找到任何东西。我试过改变所有的 css 元素，但没有运气。不知道为什么会这样。
Here is the css:
这是CSS：
header{
position: absoulute;
top: 0;
width: 100%;
margin: 0;
background: url(images/logo2.png) no-repeat;
height:100px;
left: 0px;
margin-left: 0;
}
the html:
html：
<img src="Images/logo2.png" width="1459" height="372" /></a>
<div id="header"></a></div>
So let me summarize my question one more time. I want the header image to be full width of the screen.
让我再总结一下我的问题。我希望标题图像是屏幕的全宽。
you can see the whole page here.
你可以在这里看到整个页面 。
回答by asubanovsky
Set 0px margin and padding for body.
为正文设置 0px 边距和填充。
CSS:
CSS：
body{
margin: 0px;
padding: 0px;
}
I hope it solves your problem.
我希望它能解决你的问题。
回答by Joeytje50
What you need to do is simply fix your ID selector. IDs are selected by prepending a hash character before it. In your case, the code would be:
您需要做的只是修复您的 ID 选择器。ID 是通过在它之前添加一个散列字符来选择的。在您的情况下，代码将是：
#header{
position: absolute;
top: 0;
width: 100%;
margin: 0;
background: url(images/logo2.png) no-repeat;
height:100px;
left: 0px;
margin-left: 0;
}
Notice the #before header. I've also corrected your position: absouluteto position: absolute.
注意#之前的header. 我也更正了你position: absoulute的position: absolute.
回答by Nicholas Hazel
View Here.
查看这里。
http://jsfiddle.net/SinisterSystems/j5BNC/
http://jsfiddle.net/SinisterSystems/j5BNC/
Your best bet is to make your #header image 2200px+ and reduce, otherwise it'll pixelate.
你最好的办法是让你的#header 图像 2200px+ 和 reduce，否则它会像素化。
Edit:
编辑：
@apples. Any sort of templating system(dev tools like dreamweaveror frontpage) is pretty dangerous. It applies all sorts of styles and whatnot and makes your page pretty dirty and not cross compatible. Even if it works, it may not on other browsers, resolutions, etc.
@苹果。任何类型的模板系统（如Dreamweaver或Frontpage 之类的开发工具）都非常危险。它适用于各种样式和诸如此类的东西，并使您的页面非常脏且不兼容。即使它有效，它也可能不适用于其他浏览器、分辨率等。
#header {
position:relative;
}
#header img {
position:absolute;
max-width:100%;
}
