自動判斷容器高度是否該顯示捲軸
發表於 : 15-01-2010 | 作者 : mbdmt chino
分類 : HTML & JAVASCRIPT |
0
這個需求是有時候一個A區塊不固定高度，但是下面接著一個B區塊要緊跟著，不想留空
但如果A區塊超過某個高度，就必須用捲軸顯示，因為不想讓頁面拉的太長
且B區塊不再捲軸之內。
CSS一般狀態下自動捲軸是要指定高度的，固定住高度的話，底下如果接著另一區塊內容，可能會空白一大塊
不太美觀，這時可以藉由javascript來處理，我用的是jquery來處理，應該比較容易使用。
請看以下的圖示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>autoheight_jquery</title>
<style type="text/css">
<!--
.goods {
background-color: #FF9900;
margin: 10px;
float: left;
height: 100px;
width: 100px;
position: relative;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
/*以下為必須的CSS設定*/
.out {
height:100%;
width: 440px;
position: relative;
overflow-x: hidden;
overflow-y:auto;
margin: 15px;
}
-->
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
var obheight = 700;//超過容器高度自動捲軸
var obname = '#out';//容器的ID
var mc = $(obname).height();
if(mc>obheight) $(obname).height(obheight+'px');
});
//-->
</script>
</head>
<body>
<div id="out" class="out">
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
<div class="goods"> 內容放在這裡</div>
</div>
<div><img src="mbmail.gif" /></div>
</body>
</html>
下載範例檔->DownLoad autoheight_jquery Demo