網友小黑提問:
網頁配置分為上下兩欄，上欄高度固定，下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面，上欄顯示時恢復原有版面配置，應如何實作?
一時技癢，順便也想測驗自己的CSS技巧，拿來當家庭作業暖暖手指。
在頁面放入兩個<div>當成上下欄容器，上欄<div class="top">指定height固定高。要讓下欄<div class="bottom">佔滿剩餘空間，可用position: absolute配合left:0; right: 0; bottom: 0;讓<div>向左、右、下方延伸佔滿空間，但記得top值需等於上欄高度保留空間。
接下來是切換上欄顯示功能。若純以jQuery實作，可用$(".top").hide(); $(".bottom").css("top", 0);隱藏，用$(".top").show(); $(".bottom").css("top", "200px");恢復顯示，也不難寫。但是仿效上回用CSS切換語系按鈕圖鈕的技巧，寫起來又更簡潔一些。透過切換<body> class="hide-top"，配合
.hide-top .top { display: none; }
.hide-top .bottom { top: 0px; }
指定.top及.bottom於隱藏狀態的另一組設定，再用一行$("body").toggle("hide-top")就搞定囉!
程式範例如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>上下欄CSS版面配置</title>
<style>
body { margin: 0px; } .top {background-color: #ffccdd; height: 200px;
}
.bottom {background-color: #ccffdd; padding: 6px;
position: absolute; left: 0px; right: 0px;bottom: 0px;
top: 200px;
}
.hide-top .top { display: none; } .hide-top .bottom { top: 0px; }</style>
</head>
<body>
<divclass='top'></div>
<divclass='bottom'>
<inputtype="button"id='btn'value="Toggle Top Row"/>
</div>
<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script>
$("#btn").click(function() {
$("body").toggleClass("hide-top");
});
</script>
</body>
</html>
