Question

我将子元素width设置为100%，但width超过了父width的{{1}}。

代码：

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;

Answer 1

您的问题是padding和属于框模型的border正在计算100%。

例如：width 100％+ 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>

主div内的元素超出宽度

1 个答案: