制作标题全屏（宽度）css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7327449/
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 screen (width) css
提问by GunHyman
I am trying to extend my header to cover the full page. http://dev.webgrowth.biz/and I want it look like this one http://www.webgrowth.biz/I have been trying everything for hours now. any help would be highly appreciated.
我正在尝试扩展我的标题以覆盖整页。http://dev.webgrowth.biz/我希望它看起来像这样http://www.webgrowth.biz/我已经尝试了好几个小时了。任何帮助将不胜感激。
回答by Loktar
You can achieve the effect using a container element, then just set the containing elements margin to 0 autoand it will be centered.
您可以使用容器元素来实现效果，然后只需将包含元素的边距设置为0 auto，它就会居中。
Markup
标记
<div id="header">
<div id="headerContent">
Header text
</div>
</div>
CSS
CSS
#header{
width:100%;
background: url(yourimage);
}
#headerContent{
margin: 0 auto; width: 960px;
}
回答by SublymeRick
#header {
margin: 0;
padding: 0;
width: 100%;
background: xxxx;
}
#header #content {
margin: 0px auto;
width: 800px; /* or whatever */
}
<div id="header">
<div id="content">
stuff here
</div>
</div>
回答by Simon Arnold
Set the max-width:1250px;that is currently on your body on your #container. This way your header will be 100% of his parent (body) :)
max-width:1250px;在#container 上设置当前在您身上的那个。这样你的标题将是他父母（身体）的 100% :)
回答by Zahra Raddani
min-height: 100%;
position: relative;
回答by Mohamed Saad
The best way to make the header full screen is set height to be 100vh
使标题全屏的最佳方法是将高度设置为 100vh
#header{
height: 100vh;
}
回答by Mohamed Saad
Just set the header width to be 100vw to make it full screen width and set the header height to be 100vh to make it full screen height
只需将标题宽度设置为 100vw 以使其成为全屏宽度并将标题高度设置为 100vh 以使其成为全屏高度
回答by Joseph Silber
Remove the max-widthfrom the body, and put it to the #container.
删除max-width从body，并把它放到#container。
So, instead of:
所以，而不是：
body {
max-width:1250px;
}
You should have:
你应该有：
#container {
max-width:1250px;
}
回答by Peter Georges Bou Saada
html:
html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<ul class="menu">
<li><a href="#">My Dashboard</a>
<ul>
<li><a href="#" class="learn">Learn</a></li>
<li><a href="#" class="teach">Teach</a></li>
<li><a href="#" class="Mylibrary">My Library</a></li>
</ul>
</li>
<li><a href="#">Likes</a>
<ul>
<li><a href="#" class="Pics">Pictures</a></li>
<li><a href="#" class="audio">Audio</a></li>
<li><a href="#" class="Videos">Videos</a></li>
</ul>
</li>
<li><a href="#">Views</a>
<ul>
<li><a href="#" class="documents">Documents</a></li>
<li><a href="#" class="messages">Messages</a></li>
<li><a href="#" class="signout">Videos</a></li>
</ul>
</li>
<li><a href="#">account</a>
<ul>
<li><a href="#" class="SI">Sign In</a></li>
<li><a href="#" class="Reg">Register</a></li>
<li><a href="#" class="Deactivate">Deactivate</a></li>
</ul>
</li>
<li><a href="#">Uploads</a>
<ul>
<li><a href="#" class="Pics">Pictures</a></li>
<li><a href="#" class="audio">Audio</a></li>
<li><a href="#" class="Videos">Videos</a></li>
</ul>
</li>
<li><a href="#">Videos</a>
<ul>
<li><a href="#" class="Add">Add</a></li>
<li><a href="#" class="delete">Delete</a></li>
</ul>
</li>
<li><a href="#">Documents</a>
<ul>
<li><a href="#" class="Add">Upload</a></li>
<li><a href="#" class="delete">Download</a></li>
</ul>
</li>
</ul>
</body>
</html>
css:
css：
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
body{
max-width:110%;
margin-left:0;
}
.menu {
height: 40px;
width:110%;
margin-left:-4px;
margin-top:-10px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
demo here
演示在这里
try also resizing the browser tab to see it in action
还尝试调整浏览器选项卡的大小以查看它的实际效果
