html - 主 div 内的元素超出宽度

Question

我将子元素 width 设置为 100%，但是 width 超过了 width父 div。

代码:

.MainFrame {
  max-width: 750px;
  height: auto;
  margin: auto;
  padding: 5px;
  background-color: grey;
}
div.Status {
  float: left;
  width: 100%;
  height: auto;
  margin: 5px;
  padding: 5px;
  border: 3px solid;
}
div.Disclaimer {
  float: left;
  width: 100%;
  height: auto;
  margin: 5px;
  padding: 5px;
  border: 3px solid;
}
div.Settings {
  float: left;
  width: 100%;
  height: auto;
  margin: 5px;
  padding: 5px;
  border: 3px solid;

<div class="MainFrame">
  <div class="Status">
    <center>
      <h1>Home Screen</h1>
    </center>
    <center>Waiting for a command from the user.</center>
  </div>
  <div class="Disclaimer">
    <h3>This page will be used to direct user to other tools.</h3>
  </div>
  <div class="Settings">
    <h2>Settings</h2>
    <form method="post" action="/Download/">
      <input type="submit" name="download" value="Download">
    </form>
  </div>
  ...
</div>

Answer 1

你的问题是属于盒子模型的 padding 和 border 正在计算 100%。

例如:width100% + padding 10px 会溢出。但是使用 box-sizing-border-box 可以解决这个问题，所以使用 box-sizing-border-box

你可以看到更多关于 box-sizing here和 here

注意 center 标签已弃用，请勿使用它，改为使用 CSS 样式。

注意 2:我调整了您的 CSS，减少了重复的规则/属性。

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.MainFrame {
  max-width: 750px;
  height: auto;
  margin: auto;
  padding: 5px;
  background-color: grey;
}
.MainFrame > div {
  width: 98%;
  margin: 5px;
  padding: 5px;
  border: 3px solid;
}

<div class="MainFrame">
  <div class="Status">
    <h1>Home Screen</h1>
    Waiting for a command from the user.
  </div>
  <div class="Disclaimer">
    <h3>This page will be used to direct user to other tools.</h3>
  </div>
  <div class="Settings">
    <h2>Settings</h2>
    <form method="post" action="/Download/">
      <input type="submit" name="download" value="Download">
    </form>
  </div>
  ...
</div>