我正在开设一个快速响应的网站。
查看here。
body {
font-family: 'Josefin Sans', Helvetica;
color: #333;
background-image: url(../../img/back.png);
width: 80%; /* zorgt dat er bij de linkerkant en rechterkant beide 10% weg gaat */
margin: 0 auto;
font-size: 1em;
font-weight: 400;
}
header {
background-color: white;
border-radius: 6px;
margin-top: 0.5em;
padding: 1em 0 1em 0;
text-align: center;
}
footer {
float: left; /* hierdoor blijft de footer onderaan */
font-size: 0.9em;
background-color: #C0C0C0;
border-top: 2px solid #00BFFF;
border-radius: 2px;
margin-top: 1em;
padding: 2em;
text-align: center;
}
所以我希望页脚为全宽，标题保持为80%。
但这是不可能的，因为我已经将网站的主体设置为width: 80%。
我该如何解决这个问题？
答案 0 :(得分：1)
您可以将width:125%; margin-left:-12.5%添加到页脚。
javascript:var footer=document.getElementsByTagName("footer")[0];footer.style.width="125%";footer.style.marginLeft="-12,5%";
答案 1 :(得分：1)
将您的页面分为三个部分（标题，主要内容部分和页脚），并根据需要对每个部分进行调整。
body {
font-family: 'Josefin Sans', Helvetica;
color: #333;
background:#eee url(../../img/back.png);
margin: 0;
font-size: 1em;
font-weight: 400;
}
section, header {
width: 80%;
margin: 0 auto;
}
header {
background-color: white;
border-radius: 6px;
margin-top: 0.5em;
padding: 1em 0 1em 0;
text-align: center;
}
footer {
font-size: 0.9em;
background-color: #C0C0C0;
border-top: 2px solid #00BFFF;
border-radius: 2px;
margin-top: 1em;
padding: 2em;
text-align: center;
}<header>header</header>
<section>The main content</section>
<footer>footer</footer>
答案 2 :(得分：0)
为标题应用margin:0px auto和width:80%。像下面那样应用CSS。
body {
font-family: 'Josefin Sans', Helvetica;
color: #333;
background-image: url(../../img/back.png);
width: 100%; /* zorgt dat er bij de linkerkant en rechterkant beide 10% weg gaat */
margin: 0 auto;
font-size: 1em;
font-weight: 400;
}
header {
background-color: white;
border-radius: 6px;
margin-top: 0.5em;
padding: 1em 0 1em 0;
text-align: center;
width: 80%;
margin: 0px auto;
}
答案 3 :(得分：0)
我建议将80％的宽度应用于.container div，并使该容器几乎在网站的“主体”上行动。然后，您可以将页脚放在容器外部，但然后将页脚内容包装在同一个.container div中。我假设你只想让页脚的背景为全宽，内容保持在80％。
例如（用于显示示例的内联css）：
<style>
.container{width: 80%;}
</style>
<body style="width: 100%;">
<div class="container">
<header></header>
<p>Rest of content</p>
</div>
<footer style="width: 100%;>
<div class="container">
<p>Footer content goes here</p>
</div>
</footer>
</body>
答案 4 :(得分：0)
分别给出你的身体，内容（一个包含你所有身体html的div），页眉和页脚的宽度值：
<强>体：
width:100%;
标题
width:80%;
内容：
width:80%;
<强>页脚：
width:100%;
<body>
<header>header</header>
<div id="content">Your body content</div>
<footer>footer</footer>
</body>
应该这样做。