2

我希望页脚的宽度能够拉伸 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;
}
4

4 回答 4

2

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

因为你的页脚是身体的一个孩子，而不是在正常流程之外，由于盒子模型，它总是受到身体宽度的限制。这实际上非常有用，只要您牢记盒子模型和流程的规则即可。因此，如果页脚不应受这些属性的限制，则这些属性应应用于页脚的同级而不是其父级。

例如，section如果您不需要header也应用这些规则，则可以只在元素上应用 max/min。否则，请执行以下操作：

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

于 2012-12-27T17:13:54.587 回答
1

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

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

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

于 2012-12-27T17:14:42.977 回答
0

简短的回答：没有

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

于 2012-12-27T17:15:58.133 回答
0

前部在身体内部，因此受限于身体尺寸。

您可以在正文中创建一个包装器 div；在 wrapper div 中包含 header 和 mainSection，使其为 1000px，footer div 为 100%。

于 2012-12-27T17:16:34.073 回答