限制div高度，内容多了显示滚动条的设计

来源：互联网发布：宁夏干部网络培训学院编辑：程序博客网时间：2024/05/16 08:36

1 在公司做了一个前端页面，要求是限制div的高度，内容过多后显示滚动条。

找到参考网址如下：http://blog.csdn.net/zk437092645/article/details/8641458

<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8">    <title>Title</title><script type="text/javascript">function showdiv(targetid,objN){      var target = document.getElementById(targetid);      var clicktext = document.getElementById(objN);            if (target.style.display == "block"){                target.style.display="none";          //      clicktext.innerText="点击查看详细信息";            }else {                target.style.display="block";            }  }</script>    <style type="text/css">body { font: normal 14px "宋体"}a { text-decoration: none; }#showtext1 { cursor: hand; cursor:pointer;}#showtext2 { cursor: hand; cursor:pointer;}#contentid1 { min-height:150px; width:100%;border: 0px;overflow-y:auto;max-height:200px; }#contentid2 { min-height:150px; width:100%;border: 0px;overflow-y:auto;max-height:200px; }.none { display: none; } </style>  </head>  <body><a id="showtext1" onClick="showdiv('contentid1','showtext1')">第一段</a><br>  <!--  <Textarea id="contentid1" style="overflow-y:auto; overflow-x:hidden" class="none">-->  <Textarea id="contentid1" style="overflow-x:hidden" class="none">               当地时间8月24日凌晨，意大利中部地区发生6级以上地震，首都罗马震感强烈，部分建筑在地震时晃动大约20秒。意大利民防部门称，已经接到房屋倒塌的报告。此次地震震源深度10公里，震中距离拉奎拉市48公里，距离罗马113公里。欧洲-地中海地震中心此前测定地震为6.1级，而美国地质勘探局则称震级为里氏6.2级。图为意大利中部佩鲁贾市中心资料图。  </Textarea><a id="showtext2" onClick="showdiv('contentid2','showtext2')">第二段</a>  <Textarea id="contentid2" class="none">当地时间8月24日凌晨，意大利中部地区发生6级以上地震，首都罗马震感强烈，部分建筑在地震时晃动大约20秒。意大利民防部门称，已经接到房屋倒塌的报告。此次地震震源深度10公里，震中距离拉奎拉市48公里，距离罗马113公里。欧洲-地中海地震中心此前测定地震为6.1级，而美国地质勘探局则称震级为里氏6.2级。图为意大利中部佩鲁贾市中心资料图。  当地时间8月24日凌晨，意大利中部地区发生6级以上地震，首都罗马震感强烈，部分建筑在地震时晃动大约20秒。意大利民防部门称，已经接到房屋倒塌的报告。此次地震震源深度10公里，震中距离拉奎拉市48公里，距离罗马113公里。欧洲-地中海地震中心此前测定地震为6.1级，而美国地质勘探局则称震级为里氏6.2级。图为意大利中部佩鲁贾市中心资料图。    </Textarea>  </body></html>

0 0