Question

在这个我试图理解的例子中，肯定会发生溢出，但它不起作用。为什么呢？

body, html, p {
  margin: 0;
  padding: 0;
}

html{

  background-color: #666;
}
body{
  margin: 0 auto;
  width: 780px;
  background-color: #99ccff;
  padding: 10px;
  overflow: hidden;
}

div{
  background-color: #b57c12;
  padding: 10px;
  border: 1px solid black;
  width: 820px;
}
p{
  background-color: #f7f0b7;
  border: 1px solid whitesmoke;
}

HTML：内部正文标记

Emmet： div>p>lorem10

Answer 1

身体应始终覆盖宽度的100％。我建议你设置一个内包装，而不是使用隐藏的溢出。

https://jsfiddle.net/jjxurtpk/

HTML

<div class="wrapper">
  <div>
  test
  </div>
</div>

CSS

.wrapper{
  width:400px;
  overflow:hidden;
  background:#eee;
  padding:20px;
}
.wrapper div{
  width:500px;
  background:#ddd;
  padding:10px;
}

更新：https://jsfiddle.net/jjxurtpk/1/

我认为隐藏的溢出并不完全适用，除非后台（html）没有隐藏溢出。我不确定为什么。它可能只是浏览器如何简单地呈现正文标记。

Answer 2

请参阅此fiddle

您还必须将removeTimeObserver:添加到overflow:hidden ..

请参阅以下CSS

html

Answer 3

您需要在正文上设置高度，并将overflow：hidden应用于html。

请参阅演示here

html{
  overflow: hidden;
}
body{
  height: auto;
}

CSS：溢出不起作用

3 个答案:

请参阅此fiddle