页脚不是100％宽度

Question

我的页脚有问题。首先是代码：

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
  width: 100%;
}
body {
  background: url('../images/bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  min-height: 100%;
  width: 100%;
}
body > #wrapper {
  width: 900px;
  margin: 0 auto;
  margin-top: 120px;
  height: auto;
  position: relative;
  padding-bottom: 100px;
}
.footer {
  height: 100px;
  width: 100%;
  left: 0;
  background: red;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div id="wrapper">
  //many other div container
</div>

<div class="footer">

  Test.

</div>

＆＃13;

＆＃13;

＆＃13;

现在我的页脚不是它的宽度的100％：900 px像包装器为什么？ 在我的包装器中有几个div容器，但它们都是关闭的。

谢谢

Answer 1

this适应父级的宽度，因为您的包装器宽度为900px，占用了该空间。 我建议你为宽度使用容器类，如下所示：

class CustomTextBox  : TextBox
{      

   protected override void OnClick(EventArgs e)
   {          
       //place your code here if you want to do the processing before the contol raises the event. Before call to  base.OnClick(e);
       base.OnClick(e); // call to base funciton fires event 
       //place your code here if you want to do the processing after the contol raises the event. After call to  base.OnClick(e);
   }

}

Answer 2

#wrapper的宽度为900px。你body的宽度也是如此。因此，您的.footer元素也是900px，因为它的父级宽度为... 900px。

Answer 3

你需要在#wrapper上加宽：100％。因为#wrapper上的宽度为900px，所以它会停止页脚占据屏幕的整个宽度。

Fiddle

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
  width: 100%;
}
body {
  background: url('../images/bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  min-height: 100%;
  width: 100%;
}
body > #wrapper {
  width: 100%;
  margin: 0 auto;
  margin-top: 120px;
  height: auto;
  position: relative;
  padding-bottom: 100px;
}
.footer {
  height: 100px;
  width: 100%;
  left: 0;
  background: red;
  position: absolute;
  bottom: 0;
}

<div id="wrapper">
  //many other div container
</div>

<div class="footer">

  Test.

</div>