html - 为什么元素会超出边界固定 div？

Question

在我的应用程序中，我有一个固定的页脚，在这个里面我想在左边有一个输入文本框，在右边有一个按钮。

我的 html 和 LESS 是:

.button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #1f628d 0px;
  text-decoration: none;
}

#totalPoints {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 60px;
  width: 100%;
  margin: 0 20px 0.5em 20px;
  background: #fff;
}

input {
  width: 30%;
  float: left;
}

.button {
  float: right;
}

<div id="totalPoints">
  <input type="text" value.two-way="totalPoints" readonly>
  <button class="button">Test</button>
</div>

I am expecting the button on the right to be within the confines of the div, but it is pushing outside the div.

有人知道为什么吗？

Answer 1

#totalPoints 的余量使其超出范围...

#totalPoints {
        position:fixed;
        left:0;
        bottom:0;
        height:60px;
        width:100%;
        margin: 0 0px 0px 0px; 
        background:#fff;
}