我希望页脚的宽度拉伸(stretch) 100% 的页面。不过，我在 HTML 文档的正文中定义了 min-width:1000px 和 max-width:1000px，以帮助创建流畅的布局。现在，当我创建页脚并将其设置为 max/min-width:100% 时，它不会跨越整个页面，并且受到正文上设置的 min/max-width 的限制。有没有办法将页脚的宽度设置为 100%，同时将正文中的最小/最大宽度定义为 1000px？ HTML 和 CSS 的代码是:
HTML:
<!doctype html>
<html lang="en">
<head>
Some Text
</head>
<body>
<header>
Some Text
</header>
<section class="mainSection">
<article class="mainArticle">
<header>
<h4>Some Text</h4>
</header>
<p>
Some text
</p>
</article>
</section>
<footer>
<section class="footerSection">
<article class="footerArticle">
<p>Some Text</p>
</article>
</section>
</footer>
CSS:
body{
margin:0px auto;
min-width:1000px;
max-width:1000px;
height:auto;
background-color: #97cdcd;
background-size: 5px 5px;
background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
}
body > footer{
margin:0px;
padding:0px;
min-width:100%;
max-width:100%;
background:#ffffff;
height:auto;
}
最佳答案
不要在正文上定义最大和最小宽度，而是创建一个内容 div 来包裹您的主要内容区域，并在内容 div 上应用该区域的最大和最小样式。
因为您的页脚是 body 的子元素，并且不在正常流程之外，所以由于盒子模型，它始终会受到 body 宽度的限制。这实际上非常有用，只要您牢记盒模型和流程的规则即可。因此，如果页脚不应受这些属性限制，则这些属性应应用于页脚的同级而不是其父级。
例如，如果您不需要 header 也应用这些规则，则可以在 section 元素上应用最大值/最小值。否则做类似的事情:
<!doctype html>
<html lang="en">
<head>
Some Text
</head>
<body>
<div class="content-wrapper">
<header>
Some Text
</header>
<section class="mainSection">
<article class="mainArticle">
<header>
<h4>Some Text</h4>
</header>
<p>
Some text
</p>
</article>
</section>
</div>
<footer>
<section class="footerSection">
<article class="footerArticle">
<p>Some Text</p>
</article>
</section>
</footer>
</body>
CSS:
.content-wrapper{
margin:0px auto;
min-width:1000px;
max-width:1000px;
height:auto;
background-color: #97cdcd;
background-size: 5px 5px;
background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
}
body > footer{
margin:0px;
padding:0px;
min-width:100%;
max-width:100%;
background:#ffffff;
height:auto;
}显然，您可能希望将某些样式应用于整个正文而不是内容包装器 div，这只是一个示例。
关于html - 页脚未拉伸(stretch)至 100% 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14058455/