Html 为浏览器制作一个全宽的标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9812519/
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
make a header full width for browsers
提问by Callum
I have attached my design also to try and explain things
我也附上了我的设计来尝试解释事情
Pretty much I want the header to work like a full screen image (example: http://www.flemingsteele.com/) but I thought about cutting the header where the white line is on my design and have it stretch so it will fit all monitor widths. I also want the header fixed.
几乎我希望标题像全屏图像一样工作（例如：http: //www.flemingsteele.com/），但我想在我的设计上切割白线的标题并使其拉伸以使其适合所有显示器宽度。我也希望标题固定。
I want the same to happen with my footer which is just a frosted or low opacity white bar which I want to repeat along the bottom of the page but I want it fixed to the bottom.
我希望我的页脚也发生同样的情况，它只是一个磨砂或低不透明度的白色条，我想沿着页面底部重复它，但我希望它固定在底部。
The middle part I was thinking of having it as a background colour and have divs inside that area. The problem I have at the moment is whenever I add more information to either div1 or div2 it wont scroll down because ive used position:fixed . the reason for this is I want the divs to stay below the header and when I scroll down the text goes overtop of the header
中间部分我正在考虑将其作为背景颜色并在该区域内放置 div。我目前遇到的问题是，每当我向 div1 或 div2 添加更多信息时，它都不会向下滚动，因为我使用了 position:fixed 。这样做的原因是我希望 div 保持在标题下方，当我向下滚动时，文本会超过标题
I also want it so if i add more information into either of the divs and scoll down I want have the header fixed to the top of the browser and when I scroll down all i'll see is the green coloured background, each div with the information and the fixed footer at the bottom.
我也想要它，所以如果我在任何一个 div 中添加更多信息并向下滚动，我希望将标题固定在浏览器的顶部，当我向下滚动时，我将看到的是绿色背景，每个 div 带有信息和底部的固定页脚。
Heres the coding I have at the moment.
这是我目前的编码。
HTML:
HTML：
<body>
<img alt="full screen background image" src="images/header.png" id="full-screen-background-image" />
<div id="wrapper">
<div class="logo"><img src="images/bni_logo.png" width="200" height="128" alt="BNI Logo" border="0" /></div>
<div class="minicontainer">
<div class="title"></div>
<div id="content">
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </P>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div><!--MINI CONTAINER DIV!-->
</div><!--WRAPPER DIV!-->
CSS:
CSS：
#wrapper {width:800px; height:auto; margin:0 auto}
.logo {margin-left:100px; margin-top:20px; background-image:url(images/bni_logo.png); background-repeat: no-repeat; width:auto; height:auto;}
#header{
width:100%;
background: url(yourimage);
}
.minicontainer {padding-left:130px; margin-top:150px; width:800px; height:auto; position:fixed;}
.title {background-image:url(images/title.png); width:255px; height:51px;}
#content {width:300px; height:auto; padding-left:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:130%;}
/* BACKGROUND IMAGE DO NOT TOUCH */
html, body {
height: 0%;
width: 100%;
padding: 0;
margin: 0;
background-color:#8cc643
}
#full-screen-background-image {
z-index: -999;
min-height: 30%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Hope this is explained clearly enough
希望这解释得足够清楚
采纳答案by Callum
heres the finished product
这是成品
thank you heaps to everyone that helped.
感谢所有帮助过的人。
回答by harshakasireddy
As for as my understanding this is what you are trying to do, make the header part and footer part to be fixed. The following code does that.
至于我的理解，这就是您要尝试做的事情，请修复页眉部分和页脚部分。下面的代码就是这样做的。
HTML
HTML
<div class="header">
</div>
<div class="footer">
</div>
CSS
CSS
.header{width:100%}
.footer {
background-color: black;
bottom: 0;
float: right;
height: 30px;
left: 0;
margin-top: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
Example as shown below. http://jsfiddle.net/4k2Zj/
示例如下所示。 http://jsfiddle.net/4k2Zj/
回答by Hymantheripper
I believe this is what you are looking for. Please tell me if I am mistaken.
我相信这就是你正在寻找的。如果我弄错了，请告诉我。
CSS
CSS
* {margin: 0; padding: 0}
#wrapper {
background-image: url(http://windturbinezone.com/wp-content/uploads/2010/01/windfarm.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
#content {
background-color: #8ac841;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(138, 200, 65)),to(rgb(188, 252, 109)));
background-image: -webkit-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: -moz-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: -o-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: -ms-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#8ac841', EndColorStr='#bcfc6d');
width: 100%;
height: 500px;
}
#footer {
background: green;
width: 100%;
height: 100px;
}
#div1 {
left: 100px;
top: 100px;
width: 200px;
height: 200px;
position: relative;
background-color: yellow;
display: inline-block;
}
#div2 {
left: 200px;
top: 100px;
width: 200px;
height: 200px;
position: relative;
background-color: red;
display: inline-block;
}
HTML
HTML
<div id="wrapper"></div>
<div id="content">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
</div>
