页脚不会伸展到100％宽度

我希望页脚的宽度能够拉伸100％的页面。不过，我已经在HTML文档的主体上定义了min-width：1000px和max-width：1000px，以帮助创建流畅的布局。现在，当我创建页脚将其设置为最大/最小宽度：100％时，它不会跨越整个页面，并受限于主体上设置的最小/最大宽度。有没有一种方法将页脚的宽度设置为100％，同时将最小/最大宽度定义为1000像素的身体？为HTML和CSS代码是：页脚不会伸展到100％宽度

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; 
}

来源

2012-12-27 Human

而不是定义对身体的最大和最小的宽度，使content div来包装你的主要内容区域，并在你的内容div上应用该区域的最大和最小样式。

由于您的页脚是身体的一个孩子，并且不在正常流程之外，由于盒子模型的原因，它总是受到身体宽度的限制。这实际上非常有用，只要你保持盒子模型的规则和流畅性。所以，如果页脚不应该被这些属性限制，那么这些属性应该适用于页脚的一个兄弟，而不是它的父页。

例如，如果您不需要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; 
    }

Obviously some of the styles you may want to apply to the entire body instead of the content-wrapper div, this is just an example.

来源

2012-12-27 17:13:54 taswyn

Simply: No - the footer is a child of the body, and the width percentage property is relative to the parent.

In this case, you have set the body element (parent) to a fixed width, and therefore the child will not be fluid. Instead, by giving it 100% width, you are saying, give it 100% the width of the body element, i.e. 1000px.

The only way to fix it if you're intent on keeping the max and min width properties on the body is by absolutely positioning the footer - not ideal. I would suggest you remove the max and min properties and try a different approach altogether.

来源

2012-12-27 17:14:42 jacktheripper

Short answer: no

the 100% width you give the footer is 100% of the 1000px you gave it's container. The solution to your problem is to put the <header>和<section>一个容器标签内的标签，装上了1000像素的限制。

来源

2012-12-27 17:15:58

的foorer为人体内部，因此它受限于机身尺寸。

您可以创建在体内的包装DIV;在包装div中包含header和mainSection，使其成为1000px，并使页脚div 100％。

来源

2012-12-27 17:16:34

页脚不会伸展到100％宽度

回答

相关问题