DIV @ 100％剩餘可變寬度

Question

我有可膨脹的菜單，其中由薄的左手欄彈出（開放男性和關閉菜單類型）

多數如果時間，它會佔用周圍50像素，除了當它打開時，當它的約250.

我希望我的＃內容div是100％的餘數。因此，當它打開菜單時，它的100％頁面 - 50px然後是100％頁面-250px。

貝婁是我的HTML，我需要做什麼我的基本CSS？

注我已經把關節外線路，獨立出來的2divs indside包裝

<div class="wrapper"> 

。

​​

。

<div class="content"> 
<p>CONTENT HERE</p> 
</div> 

。

</div> 

圖相救......

式菜單關閉

|---------------------------------------------------------------------| 
|     THIS IS THE #WRAPPER DIV @100%     | 
||----| |------------------------------------------------------------|| 
|| | |               || 
|| | |               || 
||THIS| |   THIS IS THE #CONTENT DIV       || 
||IS | |   @100%            || 
||THE | |               || 
||SIDE| |               || 
||-BAR| |               || 
||DIV | |               || 
||@ | |               || 
||20px| |               || 
|| | |               || 
|| | |               || 
|| | |               || 
|| | |               || 
||----| |------------------------------------------------------------|| 
|                  | 
|---------------------------------------------------------------------| 

菜單中打開

|---------------------------------------------------------------------| 
|     THIS IS THE #WRAPPER DIV @100%     | 
||--------------| |--------------------------------------------------|| 
||    | |             || 
||    | |             || 
||THIS   | |   THIS IS THE #CONTENT DIV    || 
||IS   | |   @100%         || 
||THE   | |             || 
||SIDE   | |             || 
||-BAR   | |             || 
||DIV   | |             || 
||@    | |             || 
||250   | |             || 
||px   | |             || 
||    | |             || 
||    | |             || 
||    | |             || 
||--------------| |--------------------------------------------------|| 
|                  | 
|---------------------------------------------------------------------| 

這是代碼我一直在測試

function menushow() 
{ 
screen_width = $(window).width() ; // returns width of browser viewport 
//alert($(document).width()); // returns width of HTML document 

//calculate content div width 
cont_div_width = screen_width - 250; 

（「#content」）。css（「width」，cont_div_width +「px」）;

} 

function menuhide() 
{ 

screen_width = $(window).width() ; // returns width of browser viewport 
//alert($(document).width()); // returns width of HTML document 

//calculate content div width 
cont_div_width = screen_width - 50; 

（「#content」）。css（「width」，cont_div_width +「px」）; }

其中

<a href="#" onclick="menuhide"><div id="logo" class="logo"></div></a> 

和

<a href="#" onclick="menushow"><div id="logo" class="logo"></div></a> 

和

<div id="content" class="content"> 

Answer 1

你爲什麼不充分利用屏幕/ DOC width屬性的？

使用jQuery http://api.jquery.com/width/

function menushow() 
{ 
    screen_width = $(window).width() ; // returns width of browser viewport 
    //alert($(document).width()); // returns width of HTML document 

    //calculate content div width 
    cont_div_width = screen_width - 250; 

    ("#idofcontent_div").css("width",cont_div_width+"px"); 


} 

function menuhide() 
{ 

    screen_width = $(window).width() ; // returns width of browser viewport 
    //alert($(document).width()); // returns width of HTML document 

    //calculate content div width 
    cont_div_width = screen_width - 50; 

    ("#idofcontent_div").css("width",cont_div_width+"px"); 
} 

類似的東西。希望這可以幫助你

或使用JavaScript http://www.w3schools.com/jsref/prop_screen_width.asp

<script> 
screen_width = screen.width; 
</script> 

Answer 2

使用

<script language="JavaScript"> 
onload=function(){ 
var login=document.getElementById('logo'); 
var target=document.getElementById('content'); 
login.onclick=function(){ 
target.style.paddingLeft=target.style.paddingLeft=='260px'?'75px':'260px'; 
} 
} 
</script> 

其中標誌是你點擊的div id和內容是目標 - 的div你想要的風格改變...

一件事不e是你的CSS應該開始填充在

.content { 
padding-left: 75px; 
} 

否則將首先裝載的0像素填充然後換你的點擊寬度再回到未點擊...下面的例子

0px -> 260px -> 75px -> 260px -> 75px -> 260px -> 75px -> 260px -> 75px -> 

等等等等......