内容超越本体边框

enter image description here

当我点击按钮的内容超越边界。我已经使用JavaScript来展开和折叠按钮点击内容。

enter image description here

我的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>

请帮助。

来源

2014-11-03 user3371398

套装迪v height as auto – Amy 2014-11-03 12:54:18

#jason {overflow：scroll;} – 2014-11-03 12:54:25

@amy div高度自动不起作用 – user3371398 2014-11-03 12:56:02

请尝试添加此CSS：

#jason { 
    overflow: hidden; 
} 

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

此外，从样式表中删除此：

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

来源

2014-11-03 12:57:30

工作拨弄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>

来源

2014-11-03 13:05:41

内容超越本体边框

回答

相关问题