main div 内的元素超出宽度

Question

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

代码：

.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-sizinghere and here

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

注意 2： 我调整了你的 CSS，减少了重复的 rules/properties。

*,
*: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>

main div 内的元素超出宽度

Elements inside main div exceed width

html

css

width