隱藏側邊欄 - marginRight /用Javascript顯示CSS bug

Question

我想在窗口大小調整到特定寬度以下時刪除邊欄。然後在窗口展開時再次顯示它。

HTML：

<style type="text/css"> 
    #sidebar{ 
     width:290px; 
     float:right; 
     /*...*/ 
    } 
    #header{ 
     margin-right:290px; 
     /*...*/ 
    } 
    #navigation{ 
     margin-right:290px; 
     /*...*/ 
    } 
    #page{ 
     margin-right:290px; 
     /*...*/ 
    } 
</style> 
<div id="wrapper"> 
    <div id="sidebar"> 
     ... 
    </div> 
    <div id="header"> 
     ... 
    </div> 
    <div id="navigation"> 
     ... 
    </div> 
    <div id="page"> 
     ... 
    </div> 
</div> 

的Javascript：

<script type="text/javascript"><!-- 
function sbar_check(){ 

    var page = $("#page"); 
    var header = $("#header"); 
    var navigation = $("#navigation"); 
    var sidebar = document.getElementById("sidebar"); 

    //get width of page 
    var pagew = page.width(); 

    if(pagew < 451) { 

     //hide 
     sidebar.style.display = 'none'; 

     header.css('marginRight', '0'); 
     navigation.css('marginRight', '0'); 
     /* 
     //error 
     page.css('marginRight',  '0'); 
     */ 

    } else { 

     //show 
/* 
      header.css('marginRight', '290'); 
      navigation.css('marginRight', '290'); 
      page.css('marginRight',  '290'); 
*/ 

      sidebar.style.display = 'block'; 
    } 

} 

//initial sidebar check 
$().ready(function(){ 
    sbar_check(); 
}); 
//sidebar check on resize 
window.onresize = function(event){ 
    sbar_check(); 
}; 
//--></script> 

導致意外的行爲標有//錯誤的代碼行。 如果我不留下這一行，註釋頭和導航容器都會展開並且邊欄被移除。 但是，如果我取消註釋該行，側欄不會被刪除。

我對此行爲沒有任何解釋。

Answer 1

更簡單的方法是使用media queries。

@media (max-width: 451px) { /*when the screen is less than 451px wide*/ 
    #sidebar { 
     display: none; /*hide the sidebar*/ 
    } 
    /*more CSS to change margins, etc...*/ 
}