Question

为什么 body 溢出：隐藏在视口高度大于css高度时无效？

ViewPort高度> 700px和

css身高是300px

codepen http://codepen.io/vinaymavi/pen/aNMVYX

＆＃13;

div{
  border: 1px dashed;
  height:55px;
}
body{
  padding:10px;
  width:100%;
  height:300px;
  border:2px solid red;
  overflow:hidden;
}

＆＃13;

<html> 
  <body> 
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </body>
</html

＆＃13;

输出

Answer 1

来自CSS 2.2 spec for the overflow property

UA必须应用＆＃39;溢出＆＃39;属性设置在根元素上视。当根元素是HTML＆＃34; HTML＆＃34;元素或XHTML ＆＃34; HTML＆＃34;元素，该元素有一个HTML＆＃34; BODY＆＃34;元素或 XHTML＆＃34; body＆＃34;作为孩子的元素，用户代理必须改为应用＆＃39;溢出＆＃39;从第一个这样的子元素到视口的属性，如果根元素上的值是“可见的”。

即，在body元素上设置的overflow:hidden被移动以应用于视口。为避免这种情况发生，您可以将<html>元素设置为不溢出：可见。

即。将html { overflow:auto; }添加到CSS。

Answer 2

考虑使用环绕所有div。像这样：

<main class="main">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   ...
</main>

.main{
  padding:10px;
  width:100%;
  height:300px;
  border:2px solid red;
  overflow: hidden;
}

Answer 3

如果您希望通过滚动显示溢出，请尝试library(data.table) setDT(df)[, Quest := TimesOrCorrect[DashedOrQuest == "question"], by = .(Subj, ItemNo)] df # Subj DashedOrQuest ItemNo TimesOrCorrect Quest # 1: 1 dashed 243 859 1 # 2: 1 dashed 243 648 1 # 3: 1 dashed 243 655 1 # 4: 1 dashed 243 389 1 # 5: 1 question 243 1 1 # 6: 1 dashed 244 465 0 # 7: 1 dashed 244 844 0 # 8: 1 dashed 244 578 0 # 9: 1 dashed 244 713 0 #10: 1 question 244 0 0;如果您想隐藏溢出，请overflow: auto;。另外，使用父div而不是使用body作为容器..

见：

＆＃13;

overflow: hidden;

＆＃13;

div{
  border: 1px dashed;
  height:55px;
}
#container{
  padding:10px;
  width:80%;
  height:300px;
  border:2px solid red;
  overflow: auto;
  word-wrap: break-word; 
  
}

＆＃13;

Answer 4

您需要为html和body定义css：

div{
  border: 1px dashed;
  height:55px;
}
html, body{
  padding:10px;
  margin: 0;
  width:100%;
  height:300px;
  border:2px solid red;
  overflow:hidden;
}

Answer 5

＆＃13;

div {
  border: 1px dashed;
  height: 55px;
  background-color:yellow;
}
body {
  padding: 10px;
  width: 500px;
  height: 300px;
  border: 2px solid red;
  overflow: hidden;
}
.content {
  height: 100%;
  background-color: red;
  overflow: hidden;
}

＆＃13;

<html>

<body>
  <div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
 </div>
</body>

</html>

＆＃13;

Answer 6

在包装器中添加div

div {
  border: 1px dashed;
  height: 55px;
  background-color:yellow;
}
body {
  padding: 10px;
  width: 500px;
  height: 300px;
  border: 2px solid red;
  overflow: hidden;
}
.content {
  height: 100%;
  background-color: red;
  overflow: hidden;
}

<html>

<body>
  <div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
 </div>
</body>

</html>

为什么身体溢出不起作用？

6 个答案: