Sunday, October 31, 2010

Cân bằng chiều cao của phần main và phần sidebar

(Huynh Nhat Ha's Blog) --
Khi thiết kế Blogger, đôi khi chúng ta gặp trường hợp phần main và phần sidebar của trang blog ở một số template không có chiều cao bằng nhau, khiến cho blog thiếu sự cân đối.

Việc điều chỉnh chiều cao của phần main và phần sidebar có thể được thực hiện bằng việc sử dụng javascript khá đơn giản. Bạn chỉ việc đặt đoạn code bên dưới vào trước thẻ </head> là có thể giúp cho phần main và phần sidebar có cùng chiều cao rồi.
<!--Height Fixer Starts-->
&lt;script type=&#39;text/javascript&#39;&gt;
&lt;!--
onload=function() {

var mh = document.getElementById(&#39;main-wrapper&#39;).offsetHeight;
var sh = document.getElementById(&#39;sidebar-wrapper&#39;).offsetHeight;
if(sh&gt;mh) mh=sh;
document.getElementById(&#39;main-wrapper&#39;).style.height = document.getElementById(&#39;sidebar-wrapper&#39;).style.height = mh+ &#39;px&#39;
}
//--&gt;
&lt;/script&gt;
<!--Height Fixer Ends-->
Ở đây sử dụng code đã được mã hóa để tránh trường hợp Blogger gặp lỗi đối với các Template dạng Layout.

Ý nghĩa của code trên như sau: mh biểu thị chiều cao của phần main-wrapper (main height). Biến sh thể hiện giá trị chiều cao của phần sidebar-wrapper. Nếu sh cao hơn mh thì chỉ định chiều cao của phần cao hơn (cao hơn phần main một giá trị pixel nào đó) bằng với chiều cao của phần main cộng với giá trị pixel ở trên. Như vậy script này giúp kiểm tra chiều cao của hai phần và gán cho chiều cao của hai phần đều bằng nhau khi có một phần cao hơn.

No comments:

Post a Comment