javascript - 内容超出 body 边界

Question

我有这样的 html :

当我点击按钮时，内容超出了边界。我使用了 javascript，它会在单击按钮时展开和折叠内容。

我的 css 文件包含以下代码:

body{border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border: 3px solid #00FF00;border-style:outset; padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    font-size:140%;
    }  

html,body{
  min-height: 100%;
}  

我的 html 文件:

   <a href="javascript:animatedcollapse.toggle('jason')">  
   <img class="butimg" src="../but.png" border="0" /></a><center>
   <div id="jason" style=" background-size: contain;display:none">
    <ul><li class="blue">Suppose that there is a unit square.   
   <li class="blue">There are four cats sitting at the four different corners of the square. </li><br>  
   <li > Each of those cats start chasing the other cat in the clockwise direction.  </li>  


    <li>The speed of the cats are same and constant and they continuously change their direction in a     manner that they are always heading straight to the other cat.</ul>
    </div><div style="visibility:hidden;height:90px">kkm</div>  

请帮忙。

Answer 1

请尝试添加此 CSS:

#jason {
     overflow: hidden;
}

#jason ul {
     display: block;
     padding: 0px;
}

此外，从您的样式表中删除它:

html,body{
     min-height: 100%;
}