内容超越了身体边界

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%;
}  

Answer 2

工作小提琴http://jsfiddle.net/raghuchandrasorab/qyj6xo6q/3/

尝试这样的事情

<div class="main-block">
    <div>Here will be your first block of text</div><br>
    <div class="btn-expand">button</div><br>
    <div id="hidden-block" style="display:none">here goes your second block of text, here goes your second block of text, here goes your second block of text,</div>
</div>