限制div高度,內容多了顯示滾動條的設計

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章