页脚未拉伸到 100% 宽度答案

【问题标题】：Footer does not stretch to 100% width页脚未拉伸到 100% 宽度
【发布时间】：2012-12-27 17:11:30
【问题描述】：

我希望页脚的宽度能够拉伸 100% 的页面。但是，我在 HTML 文档的正文中定义了 min-width:1000px 和 max-width:1000px 以帮助创建流畅的布局。现在，当我创建将其设置为 max/min-width:100% 的页脚时，它不会跨越整个页面，并且受到正文上设置的 min/max-width 的限制。有没有办法将页脚的宽度设置为 100%，同时在正文中将最小/最大宽度定义为 1000 像素？ 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;
}

【问题讨论】：

标签： html width footer css

【解决方案1】：

不要在正文上定义最大和最小宽度，而是创建一个内容 div 来包裹您的主要内容区域，并将该区域的最大和最小样式应用于您的内容 div。

由于您的页脚是 body 的子节点，而不是正常流程之外，因此由于 box 模型，它始终会受到 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，这只是一个示例。

【讨论】：

【解决方案2】：

简单地说：否 - footer 是 body 的子元素，width 百分比属性是相对于父元素的。

在这种情况下，您已将 body 元素（父元素）设置为固定宽度，因此子元素不会是流动的。相反，通过给它 100% 的宽度，您是在说，给它 100% 的 body 元素的宽度，即 1000px。

如果您打算在 body 上保留最大和最小宽度属性，解决此问题的唯一方法是绝对定位页脚 - 不理想。我建议您删除 max 和 min 属性并完全尝试不同的方法。

【讨论】：

【解决方案3】：

简短回答：没有

你给页脚的 100% 宽度是你给它的容器的 1000px 的 100%。解决您的问题的方法是将<header> 和<section> 标签放在容器标签内，并在其上设置1000px 的限制。

【讨论】：

【解决方案4】：

foorer在身体内部，所以它受限于身体大小。

你可以在body里面创建一个包装div；在 wrapper div 中包含 header 和 mainSection，使其为 1000px，footer div 为 100%。

【讨论】：