Question

通常情况下，当父母的边际利润崩溃时，隐藏是有帮助的，但在这种情况下，它不起作用。 padding:0.01px,position absolute可以正常进行其他修复。您能解释一下为什么溢出在这里不起作用吗？

html {
  background: #e3b5a4;
  height: 100%;
}

body {
  background: #d1cfcd;
  width: 960px;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
}

div {
  text-align: center;
  background: #eee;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
</head>

<body>
  <div class="header">Header</div>
  <div class="navigation">Navigation</div>
  <div class="leftcontent">Content Left</div>
  <div class="main-content">Main Content</div>
  <div class="right-content">Content Right</div>
  <div class="footer">Footer</div>
</body>

</html>

link to jsfiddle

Answer 1

因为如果您未设置html元素可见的溢出值，则主体上的overflow:hidden设置将被传输到视口。因此，它不会应用于body元素，因此无法阻止边距崩溃。要解决此问题，只需将html元素上的溢出设置为auto。

html {
  background: #e3b5a4;
  height: 100%;
  overflow:auto;
}

body {
  background: #d1cfcd;
  width: 960px;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
}

div {
  text-align: center;
  background: #eee;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
</head>

<body>
  <div class="header">Header</div>
  <div class="navigation">Navigation</div>
  <div class="leftcontent">Content Left</div>
  <div class="main-content">Main Content</div>
  <div class="right-content">Content Right</div>
  <div class="footer">Footer</div>
</body>

</html>

Answer 2

这是保证金的常规行为-只需将margin-top的{{1}}设置为0：

.header

html {
  background: #e3b5a4;
  height: 100%;
}

body {
  background: #d1cfcd;
  width: 960px;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
}

div {
  text-align: center;
  background: #eee;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}
.header {
  margin-top: 0;
}

为什么人体的上缘仍在崩溃？

2 个答案: