我构建了一个非常简单的网站，它以包装器为中心，看起来 like this .这解决了我不得不处理的许多分辨率问题，但我现在的问题是，无论何时更改屏幕，条形颜色都会在 wrapper 的长度处停止。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="main.css" media="screen" />
<title>titel</title>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>
<body>
<!-- ############### -->
<!-- OVERALL WRAPPER -->
<!-- ############### -->
<div class="head_wrapper">
<!-- HeaderBarMain -->
<div class="header">
<h2>Contact us with the number:####</h2>
<!-- Navigation menu -->
<div class="navMain">
<!-- Menu List -->
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- END navMain -->
</div><!-- END header -->
<!-- Logo Wrapper -->
<div class="logoWrap">
<div class="logoholder">
<img class="logo" src="Pictures/logo.gif" width="297" height="120" alt=""/>
</div> <!-- END logo holder -->
</div><!-- END logo Area -->
<!-- ### Java window ### -->
<div class="mainWindowContent">
<div class="JavaGallery">
</div> <!-- END JAVA holder -->
</div> <!-- END mainWindow content -->
<!-- Main links window wrapper of dental medical -->
<div class="wrapMainLinks">
<div class="mainLinks">
<ul>
<li><a href="#">Linkl</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div> <!-- END mainLinks -->
</div> <!-- END wrapMainLinks -->
<div class="footerHolder">
<div class="footerContent">
<h3>
</h3>
</div>
</div>
<div class="footBarWrapper">
<div class="footBarContent">
<h4></h4>
</div> <!-- END footBarContent -->
<div class="botNavMain">
<!-- Menu List -->
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div> <!--END botNavMain-->
</div>
</div> <!-- END overall wrapper -->
</body>
</html>
CSS @字符集“utf-8”； /* CSS 文档 */
/* ###################### */
/* General HTML Tag Rules */
/* ###################### */
/*body margin setup*/
body{
background-color:#ffffff;
margin:auto;
font: normal 100% Arial;
overflow-x: hidden;
}
/*Link setup style*/
a {
color: #ffffff;
border-bottom: none;
text-decoration: none;
}
a:visited {
color: #ffffff;
}
a:hover,
a:focus,
a:active {
border-bottom: 2px solid;
}
a:focus,
a:active {
color: #ffffff;
}
/* ############################ */
/* General Template Class Rules */
/* ############################ */
.head_wrapper {
width:1007px;
margin:0 auto;
}
.logoWrap {
}
.logoholder .extendfull{
height:145px;
}
.logoholder img.logo{
margin: 10px 0px 0px 40px;
}
.mainWindowContent {
background: #ECECEC;
height: 480px;
padding:1px;
}
.JavaGallery {
margin: 5px 0px 10px 0px;
background:#ffffff;
height: 460px;
width:1024px;
}
.wrapMainLinks {
height: 55px;
background-image:url(Pictures/Buttom_BG.gif);
background-repeat:repeat-x;
}
.mainLinks {
margin: 0px 0px 0px 0px;
}
.header {
background: #717171;
background-repeat:repeat-x;
height: 37px;
width: 1024px;
margin-top:0px;
}
.navMain {
float:right;
margin:5px 0px 0px 0px;
}
.footerHolder {
height:150px;
background: #191919;
}
.footerContent {
}
.footerContent h3 {
padding: 40px;
margin:0px 0px 0px 320px;
font-size:11px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#D4D4D4;
}
.footBarWrapper {
height: 100px;
background-color: #454444;
padding: 2px;
margin: 20px 0px 0px 0px;
}
.footBarContent {
height: 50px;
margin: 60px 0px 0px 50px;
font-size:12px;
}
.botNavMain {
margin: 20px 0px 0px 0px;
}
/* ############################ */
/* General Navigation Rules */
/* ############################ */
.navMain ul {
margin: 1px 40px 0px 0px;
}
.navMain ul li {
margin: 0px;
padding: 0px 20px;
list-style:none;
display:inline;
font-size:13px;
}
.navMain ul li a {
margin: 0px;
padding: 0px;
}
.navMain ul li a:hover {
color:#FFBF06;
}
.header h2 {
margin: 10px 20px 5px 80px;
font-size:11px;
float:left;
color:#FFFFFF;
}
.mainLinks ul {
margin: 0px 0px 0px 10px;
padding: 15px;
font-size:20px;
}
.mainLinks ul li {
padding:10px;
list-style:none;
display:inline;
margin:0px 50px 0px 130px
}
.mainLinks ul li a {
margin: 0px;
padding: 0px;
color:#000000;
}
.mainLinks ul li a:hover {
color:#3E3E3E;
}
.botNavMain ul {
margin: -100px 0px 0px 0px;
}
.botNavMain ul li {
margin: 0px;
padding: 0px 9px;
list-style:none;
display:inline;
font-size:13px;
}
.botNavMain ul li a {
margin: 0px;
padding: 0px;
color:#FFFFFF;
}
.botNavMain ul li a:hover {
color:#00000;
}
是否可以将条形图扩展到包装器外部，使其到达浏览器宽度的末端？
最佳答案
最好的方法是将它们从容器/包装器中排除。 让我们假设容器/包装器只是一个简单的 block ，假设 980px 带有 margin:0 auto 来居中。
<div class="container">
<!-- your content for the centered container -->
</div>
<div class="your-bottom-thing-with-colors">
<!-- your content for the full width div -->
<!-- you can even add a new container IN this div, to center your content like so: -->
<div class="container>Content in a full-width bar example</div>
</div>
<div class="container>
<!-- start your container again with a smaller width and margin:0 auto; -->
您可以通过将 header 放在容器之前来实现相同的目的。
关于html - 扩展到包装器之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22885575/