Question

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

Answer 1

不是在主体上定义最大和最小宽度，而是创建一个内容div来包装主内容区域，并在内容div上应用该区域的最大和最小样式。

由于您的页脚是身体的一个孩子，而不是在正常流量之外，因为盒子模型，它将始终受到身体宽度的限制。这实际上非常有用，只要你保持盒子模型的规则和流程。因此，如果页脚不应受这些属性的限制，那么这些属性应该适用于页脚的兄弟而不是其父级。

例如，如果您不需要section同时应用这些规则，则可以在header元素上应用最大值/分钟。否则做类似的事情：

<!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，这只是一个示例。

Answer 2

简单地说：否 - 页脚是正文的子级，宽度百分比属性是相对于父级的。

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

如果你打算在身体上保持最大和最小宽度属性，唯一的方法是通过绝对定位页脚 - 不理想。我建议你删除max和min属性，然后尝试不同的方法。

Answer 3

简答：没有

您给页脚的100％宽度是您给它的容器的1000px的100％。问题的解决方案是将<header>和<section>标记放在容器标记内，并将1000px限制放在容器标记上。

Answer 4

foorer在体内，因此仅限于体型。

你可以在体内创建一个包装div;在包装器div中包含header和mainSection，使其为1000px，页脚div为100％。

页脚不会拉伸到100％宽度

4 个答案: